redux使用详解

最新推荐文章于 2025-04-23 14:15:38 发布

一杯清泉

最新推荐文章于 2025-04-23 14:15:38 发布

阅读量1.5k

点赞数 1

分类专栏： react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/yoonerloop/article/details/124134895

版权

react 专栏收录该内容

26 篇文章

订阅专栏

一个状态管理的JS库，用于数据的共享。结构如下：

安装：

yarn add redux

一、简化版的redux

1、src/reducer/store.js

//引入createStore
import {createStore} from 'redux'
//引入服务的reducer
import reducer from "./reducer";

export default createStore(reducer)

2、src/reducer/reducer.js

const defaultState = {
    count: 0
}

const reducer = (preState = defaultState, action) => {
    const {type, data} = action
    switch (type) {
        case 'add':
            return {
                count: preState.count + data
            }
        case 'reduce':
            return {
                count: preState.count - data
            }
        default:
            return defaultState
    }
}

export default reducer

3、src/reducer/App.js

import React, {Component} from 'react';
import {Button} from 'antd'
import 'antd/dist/antd.css'
//用于获取状态
import store from "./reducer/store";

export default class App extends Component {

    componentDidMount() {
        //reducer不会触发页面变化，需要state来触发
        store.subscribe(() =>{
            this.setState(store.getState())
        })
    }

    render() {
        //获取reducer数据
        const {count} = store.getState()
        return (
            <div>
                <Button type='primary' onClick={this.reduce}>-</Button>
                <span>{count}</span>
                <Button type='primary' onClick={this.add}>+</Button>
            </div>
        );
    }

    reduce = () => {
        //通知reducer页面数据变化了
        store.dispatch({
            type: 'reduce',
            data: 1
        })
    }

    add = () => {
        //通知reducer页面数据变化了
        store.dispatch({
            type: 'add',
            data: 1
        })
    }
}

二、完整版的redux

1、为了防止type被多个js引用，不小心写错，引发报错，需要将type设置为常量，创建src/reducer/typeCreators.js文件：

export const ADD = 'add_type'
export const REDUCE = 'reduce_type'

2、创建src/reducer/actionCreators.js文件。统一抽取action：

import {ADD, REDUCE} from "./typeCreators";

export const addAction = (data) => (
    {
        type: ADD,
        data
    }
)

export const reduceAction = (data) => (
    {
        type: REDUCE,
        data
    }
)

三、redux 的异步action

如果action是一个对象，则是同步action；如果action是一个function，这是一个异步action，直接使用action返回函数redux不允许，直接报错，redux认识返回一个对象的action，如下方式是不被允许的：

import store from "./store";

/**
 * 异步加的action：返回的是函数，直接使用这种方式会报错
 */
export const addActionAsync = (data, time) => {
    return ()=>{
        setTimeout(()=>{
            store.dispatch(addAction(data))
        },time)
    }
}

这是需要使用一个中间件来实现异步的的功能，即：redux-thunk。

四、redux-thunk实现异步action

yarn add redux-thunk

1、src/reducer/store.js

import {createStore,applyMiddleware} from 'redux'
import thunk from "redux-thunk";
import reducer from "./reducer";

/**
 * 该文件用于暴露一个store对象
 */
export default createStore(reducer, applyMiddleware(thunk))

这时候直接运行addActionAsync就不会报错了。

addActionAsync本身执行在store中，返回值默认有一个参数dispatch，不需要额外的引入，可以简化为

/**
 * 简化版
 */
export const addActionAsync = (data, time) => {
    return (dispatch) => {
        setTimeout(() => {
            //异步任务一般在函数内都会调用同步action
            dispatch(addAction(data))
        }, time)
    }
}

异步action不是一个必须的需求，异步任务可放在action中执行，也可以放在组件中执行。

五、react-redux

yarn add react-redux

redux是非官方的，使用其他也没啥问题，由于比较好用，官方又集成了redux，推出react-redux，用法更为灵活。如下模型图：

六、react-redux基本使用

UI组件：一般放在components文件夹下
容器组件：一般放在container文件夹下

1、src/components/count/index.jsx：

export default class CountUI extends Component {

    render() {
        console.log('UI组件接收到的props：', this.props)
        return (
            <div>
                <Button type='primary' onClick={this.reduce}>-</Button>
                <span>{this.props.count}</span>
                <Button type='primary' onClick={this.add}>同步+1</Button>
                <Button type='primary' onClick={this.addAsync}>异步+2</Button>
            </div>
        );
    }

    reduce = () => {
        this.props.reduce(10)
    }

    add = () => {
        this.props.add(5)
    }

    addAsync = () => {
        this.props.addActionAsync(2, 500)
    }
}

2、src/containers/count/index.jsx：

//引入UI组件
import CountUI from "../../components/count";
//引入connect用于连接UI组件和redux
import {connect} from "react-redux";
//引入action
import {
    addAction,
    reduceAction,
    addActionAsync
} from "../../reducer/actionCreators";

//----->状态
function mapStateToProps(state) {
    return {
        count: state.count
    }
}

//----->操作状态的方法
function mapDispatchToProps(dispatch) {
    return {
        add: number => dispatch(addAction(number)),
        reduce: number => dispatch(reduceAction(number)),
        addActionAsync: (number, time) => dispatch(addActionAsync(number, time))
    }
}

//使用connect创建并暴露一个count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

mapStateToProps

1、mapStateToProps函数返回一个对象

2、返回的key作为传递给UI组件的props的key，value作为UI组件props的value

3、mapStateToProps用于传递状态

mapDispatchToProps

mapDispatchToProps函数返回一个对象

返回的key作为传递给UI组件的props的key，value作为UI组件props的value

mapDispatchToProps用于传递状态的方法

七、react-redux优化使用

1、mapDispatchToProps简写

const mapStateToProps = state => ({count: state.count})

//mapDispatchToProps一般写法
const mapDispatchToProps = dispatch => ({
    add: number => dispatch(addAction(number)),
    reduce: number => dispatch(reduceAction(number)),
    addActionAsync: (number, time) => dispatch(addActionAsync(number, time))
});

//mapDispatchToProps精简写法，react-redux可以自动调用dispatch完成分发
const mapDispatchToProps = {
    add: addAction,
    reduce: reduceAction,
    addActionAsync: addActionAsync
};

//参数1：映射状态
//参数2：映射状态的操作方法
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

即：mapDispatchToProps既可以当做函数，也可以当做对象。

2、无需自己给组件设置store，只需要给外壳设置

import store from "./reducer/store";
import {Provider} from "react-redux";

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

3、容器组件和UI组件合而为一，将connect写在UI组件的外面

src/containers/count/index.jsx：

import React, {Component} from 'react';
import {connect} from "react-redux";
import {Button} from 'antd'
import 'antd/dist/antd.css'
import {
    addAction,
    reduceAction,
    addActionAsync
} from "../../reducer/actionCreators";

class Count extends Component {

    render() {
        return (
            <div>
                <Button type='primary' onClick={this.reduce}>-</Button>
                <span>{this.props.count}</span>
                <Button type='primary' onClick={this.add}>同步+1</Button>
                <Button type='primary' onClick={this.addAsync}>异步+2</Button>
            </div>
        );
    }

    reduce = () => {
        this.props.reduce(10)
    }

    add = () => {
        this.props.add(5)
    }

    addAsync = () => {
        this.props.addActionAsync(2, 500)
    }
}

const mapStateToProps = state => ({count: state.count})

const mapDispatchToProps = {
    add: addAction,
    reduce: reduceAction,
    addActionAsync: addActionAsync
};

export default connect(mapStateToProps, mapDispatchToProps)(Count)

4、使用react-redux之后不需要自己使用store.subscribe检查redux中状态改变了，容器组件自动完成。

八、combineReducers

当有多个reducer时候，需要将reducer合并成一个，否则createStore只接受一个reducer，其他的reducer就没有引入，这时候用到combineReducers：

import {createStore, applyMiddleware, combineReducers} from 'redux'
import thunk from "redux-thunk";
import countReducer from "./count/reducer";
import personReducer from "./person/reducer";

//所有的reducer保存为一个reducer
const allReducer = combineReducers({
    c: countReducer, //count可以根据需求任意命名，比如：c，haha,shu等等
    p: personReducer
})

export default createStore(allReducer, applyMiddleware(thunk))

在容器组件中使用的时候：

const mapStateToProps = state => {
    //注意这块有个c，需要和combineReducers中的对应
    return {count: state.c.count}
}

还可以简化，引入reducer.js：

import countReducer from "../reducers/count";
import personReducer from "../reducers/person";
import {combineReducers} from "redux";

//所有的reducer保存为一个reducer
export default combineReducers({
    c: countReducer, //count可以根据需求任意命名，比如：c，haha,shu等等
    p: personReducer
})

在store.js中：

import {createStore, applyMiddleware} from 'redux'
import thunk from "redux-thunk";
import {composeWithDevTools} from 'redux-devtools-extension';
import allReducer from "./reducers";

export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))