1 创建redux目录
2 编写action
3 编写reducer
4 编写 reducers combineReducers 将多个reducer整合到一起
tip: reducer就是纯函数, 接收state 和action 返回一个新的state combineReducers【处理整颗树】 和 reducer【处理树的某一个节点】同理
5 store的职责
6 编写store
7 编写testRedux.js
8 执行命令
tip: 此例子是标明 redux 和 react没关系,虽然可以相互合作
8 增加counter页面
tip: 有两种不同的引入写法 一个是用大括号 一个是不用大括号(export default的模式)
9 增加router页面
10 Counter 和 Redux联合起来, 使得Counter能获取Redux的state, 并且能发起action
当然可以使用Store.getState()获取数据, 但这比较麻烦 react-redux提供了一个方法 connect
connect 接收两个参数 mapStateToProps 是将redux的state转为组件的props,
mapDispatchToprops 就是将发起的actions方法转为props属性函数
疑问:
这块属性转化为啥需要访问 state.counter属性 counter是在哪块赋值的
回答疑问:
在控制打印的数据内容是:
11 添加store
tip: Provider 组件是让所有的组件可以访问到store, 不用手动传递, 也不用手动监听
connect 函数作用是从Redux state树中读取部分数据, 并通过props将这些数据提供给要渲染的组件, 也传递dispatch函数到prop
12 异步请求 修改 actions/userInfo.js
13 上面的actions返回了函数, 增加了这种类型 需要引用 redux-thunk
14 在store.js 中引入redux-thunk
15 编写userInfo组件
16 添加路由