react 生态圈之 Redux

  • 时间:
  • 浏览:
  • 来源:互联网

一、Redux 前端为何需要状态管理库

  1. ReduxJS 状态管理框架,Redux 让组件通信更加容易,把 store 放在组件外,所有组件和 store 进行中转

  2. Redux 特性,如下所示:

  • 单向数据流
  • 可预测性,state + action = new state
  • 纯函数更新 Store

二、Redux 深入理解 Store、Action 和 Reducer

  1. store 可以通过 createStore,传入 reducer 进行创建,包含三个方法,如下所示:
  • getState(),获取当前的状态
  • dispatch(action),派发一个 action
  • subscribe(listener),监听 store 的变化
  1. (state,action) => new state,如下所示:
  • Store
  • Actions
  • Reducer
  • View
  1. combineReducers,能够接受多个 reducer 作为参数,最终返回一个封装后的 reducer

  2. bindActionCreators,将单个或多个 ActionCreator 转化为 dispatch(action) 的函数集合形式,不用再手动 dispatch(actionCreator(type)),而是可以直接调用方法

三、在 React 中使用 Redux

  1. connect 的工作原理,高阶组件

四、Redux 理解异步 Action、Redux 中间件

  1. (state,action) => new state,如下所示:
  • Store
  • Actions
  • Reducer
  • View
  • Middleware
  1. Redux 中间件,Middleware,如下所示:
  • 截获 action
  • 发出 action
  1. 异步 action 不是特殊 action,而是多个同步 action 的组合使用

  2. 中间件在 dispatcher 中截获 action 做特殊处理

五、Redux 如何组织 Action 和 Reducer

  1. 标准形式 Redux Action 的问题,如下所示:
  • 所有 Action 放一个文件,会无限扩展
  • Action、Reducer 分开,实现业务逻辑时需要来回切换
  • 系统中有哪些 Action 不够直观
  1. 新的方式,单个 actionreducer 放在同一个文件

  2. 新的方式,每个文件一个 Action,如下所示:

  • 易于开发,不用在 actionreducer 文件间来回切换
  • 易于维护,每个 action 文件都很小,容易理解
  • 易于测试,每个业务逻辑只需对应一个测试文件
  • 易于理解,文件名就是 action 名字,文件列表就是 action 列表

六、Redux 理解不可变数据 immutability

  1. 不可变数据 immutable data,需要不可变数据,如下所示:
  • 性能优化
  • 易于调试和跟踪
  • 易于推测
  1. 如何操作不可变数据,如下所示:
  • 原生写法,{...}, Object.assign
  • immutability-helper
  • immer

本文链接http://www.dzjqx.cn/news/show-617056.html