redux 学习 求和案例

1.求和案例_redux 精简版

1. 去除 Count 组件自身的状态
2. src 下建立:
  -redux
  -store.js
  -count_reducer.js

3. store.js：
  1).引入 redux 中的 createStore 函数，创建一个 store
  2).createStore 调用时要传入一个为其服务的 reducer
  3).记得暴露 store 对象

4. count_reducer.js：
  1).reducer 的本质是一个函数，接收：preState,action，返回加工后的状态
  2).reducer 有两个作用：初始化状态，加工状态
  3).reducer 被第一次调用时，是 store 自动触发的，
  传递的 preState 是 undefined,
  传递的 action 是:{type:'@@REDUX/INIT_a.2.b.4}

5. 在 index.js 中监测 store 中状态的改变，一旦发生改变重新渲染<App/>
  备注：redux 只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

2.求和案例_redux 完整版

新增文件：
  1. count_action.js 专门用于创建action对象
  2. constant.js 放置容易写错的type值

3.求和案例_redux 异步 action 版

  1. 明确：延迟的动作不想交给组件自身，想交给action
  2. 何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
  3. 具体编码：
      1).yarn add redux-thunk，并配置在store中
      2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
      3).异步任务有结果后，分发一个同步的action去真正操作数据。
  4. 备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

5. 求和案例_react-redux 优化

1.

7. 求和案例_react-redux 开发工具的使用

0. chrome 安装插件 Redux DevTools
1. yarn add redux-devtools-extension
2. 修改 store 的配置
    import {composeWithDevTools} from 'redux-devtools-extension'
    export default createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)))