配置redux过程

1、加入依赖包

npm i redux -S
npm i react-redux -S
npm i redux-devtools -D
npm i redux-logger -D
复制代码

2、根元素加入Provider，创建store

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './reducers' //配置reducer

const store = createStore(reducer)
const state = store.getState() //数据可以通过getState()获得
<Provider store={store}>
    <App />
</Provider>
复制代码

3、配置reducer，函数，参数action和当前state，返回新的state

const reducer = function (state = { a=0 }, action) {
    // ...
    return new_state;
};

// 多个reducer通过combineReducers结合
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    ...// 自定义的reducer模块
})
复制代码

4、配置action，对象，参数type必须，其他自由设定，通过action触发reducer修改state

export const addTodo = text => ({
    type: 'ADD_TODO',
    text
})
store.dispatch(addTodo) // 通过dispatch出发type对应的reducer
复制代码

5、页面内调用

// 1) 创建输入逻辑mapStateToProps和输出逻辑mapDispatchToProps
// 2) 用connect函数将mapStateToProps和mapDispatchToProps绑定到UI组件上
import { bindActionCreators } from 'redux'
imoprt * as Actions from './actions'

const mapStateToProps = state => ({
    addTodo: state.addTodo
})
const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(Actions, dispatch)
})

connect(
    mapStateToProps,
    mapDispatchToProps
)(APP)

// 3) 绑定之后就可以rend函数里调用 action(:actions.xxx)和state(:addTodo)
this.props.actions.xxx
this.props.addTodo.xxx复制代码