https://github.com/kianyin/hello-redux
Step 1 构建create-react-app项目
create-react-app hello-redux
cd hello-redux
cnpm i
cnpm start
Step 2 调整项目结构
视图组件放到components目录下
Step 3 用react的方式多层传参
传统的props传参
Step 4 使用context
context
我们已经不用一层一层用props传参啦
问题: context的更新还是较为复杂, 且不可控
Step 5 使用store
状态存到store里, store接收一个参数reducer 并向外暴露三个方法 getState, subscribe, dispatch
reducer 可以视为改变状态的方法集
getState 用于对外暴露 state
dispatch 用于改变 state
subscribe 用于订阅 dispatch 后的回调
现在, 我们把 store 直接传入 context
Step 6 使用dispatch
这里就有点像 redux 了, 但是似乎执行 dispatch 之后没什么作用
Step 7 添加subscribe
这下就知道视图是怎么跟随 store 的改变而更新的啦
问题: 每个组件里都有大量重复逻辑
Step 8 构建高阶组件Connect
高阶函数是对函数的封装 => 函数返回一个函数
高阶组件就是对组件的封装 => 函数返回一个组件
Connect 接收视图组件, 返回经过加工之后的视图组件
这样帮助我们节省了很多重复代码
而且视图组件可以从 this.props 里面获得 state , 十分的像 redux
问题: 所有的组件都可以获得所有的state值, 有些浪费
Step 9 mapStateToProps
相当于给 Connect 多加了一个参数, 用来给组件传递指定的 state
