共计 1434 个字符，预计需要花费 4 分钟才能阅读完成。
redux 是一种对项目进行统一的状态管理机制，父子组件间通信是通过 props 属性值传递和子组件回调父组件提前声明好的方法，整个 state 只能从上到下，而没有回溯的能力，redux 将所有的 state 集中到所有组件顶层，然后分发给每个组件自己需要的 state，更好的管理状态, 顶层分发状态，让 React 组件被动地渲染, 而 react hooks 解决的是 pure render function（渲染函数组件）拥有状态和生命周期
react-redux 构成
1.store
单一数据源 store 由 rootReducer 组成，用于最外层组件
import {createStore} from ‘redux’;
import {Provider} from ‘react-redux’;
const store = creacteStore(rootReducer);
<Provider store={store}><App /></Provider>
2.rootReducer
rootReducer 由多个 reducers 组成
import {combineReducers} from ‘redux’;
export default combineReducers({reducerA, reducerB})
3.Reducer
每一个 reducer 由 oldState(initState) 和 action 组成，通过 action.type 返回 newState，default 返回 oldState
export default function count (state = 0, action) {
switch(action.type) {
case ‘count’:
return state + 1
default:
return state
}
}
4.Action
action 可以是一个方法，用于返回对象，也可以直接是一个对象，type 属性是必须的
export function count () {
return {
type: ‘count’
}
}
5.conncet
connect 用于连接组件和数据
import {connect} from ‘react-redux’
export default connect(mapStateToProps, mapDispatchToProps)(App)
6.mapStateToProps
mapStateToProps 方法用于将状态映射成属性，返回组件需要的属性
const mapStateToProps = (state) => {
return {
count: state.count
}
}
7.mapDispatchToProps
mapDispatchToProps 提供给组件一个属性用于触发 dispatch，也就是用户触发 action
const mapDispatchToProps = (dispatch) => {
return {
addCount: () => dispath(someAction) // dispatch 的对象是 action
}
}
react-redux 注意点
state = store.getState() // 获取 state
state.count = state.count + 1 // state 是只读的，只能通过 dispatch(action) 改变
我写了一个完整的简单的 react-redux-count-demo 项目，也是上面演示的列子参考 Redux 简明教程和理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？– Wang Namelos 的回答 – 知乎
