redux
是什么:多组件间共享状态
原理:围绕着 store 来学 redux
react-component : 客人 , 调用定义好的 Action Creators
Action Creators: 服务员, dispatch 分发 action 给 store, action 是一个预定义对象,包含 type 和 preload 属性,type 存一个定义好的常量, preload 存改变的值。
Store: 老板, 调用 Reducers 处理状态
Reducers 厨师, 加工状态 state, 返回一个新的 state 给 store
组件中 getState 获取到新的值
react-redux
是什么:react 官方 redux 插件, 定义了一套规则来共享状态
原理:分为 UI 组件 和 容器组件
UI 组件 通过 props 来通知 容器组件, 让容器组件来修改 store 的值
容器组件 通过 store.dispatch(action) 来和 redux 交互。
容器组件给UI 组件 当前 redux 的状态 和 操作方法, 通过 props 来告诉容器组件去更新 redux 里的值。
容器组件通过 connect( mapStateToProps, mapDispatchToProps )( UI 组件) 绑定关联关系, 通过两个函数来实现 redux 交互
mapStateToProps = state => ({…..})
mapDispatchToProps = dispatch => ({….})