1 Redux

  • 集中式管理 react 应用中多个组件共享的状态和从后台获取的数据
  • React-Redux 简化 redux
  • Redux-thunk 实现 redux异步编程
  • Redux-DevTools 实现 chrome中 redux调试
  1. redux
  2. redux-thunk
  3. redux-saga
  4. react-redux
  5. redux-log 记录日志

Redux的工作流程

  • Redux = reducer + flux
  • Redux 所有数据都在 store中
  • 纯函数指的是:给定固定的输入,就一定会有固定的输出,而且不会有任何副作用
  • 中间件一定是 Redux的中间件,不是 react的中间件
    • redux-devtools 也是 redux 的中间件
    • 中间件:谁和谁的中间 action 和 store 中间
  1. Components 组件
  2. action 我要借书
  3. store.dispatch
  4. actionTypes 的拆分
  5. actionCreator 统一创建 action
  6. Store 图书管理员
  7. Reduces 书籍的记事本
  8. 借的书
  9. 要换的书
  10. 使用 redux-thunk action 可以是个函数
  11. 中间件就是对 dispatch方法的封装和升级
  12. 最原始的 dispath 只接收对象,然后传递给 store
  13. action 传递个 dispath 对象,直接传递给store
  14. 如果是 函数,先把函数执行结束
  15. 如果 action 传递的是函数,先让函数执行
  16. 根据参数的额不同,执行不同的事情
  17. thunk 异步操作放到 action 里面操作
  18. redux-saga 拆分 action 到一个单独的文件

react-redux

  • connect 做链接,TodoList 链接 Store
    • 怎么做链接,有个映射关系
  • export default connect()(TodoList)
  1. export default connect(mapStateToProps, mapActionToprops)(TodoList)