Redux基础知识

文档:http://cn.redux.js.org/index.html

三大原则

  • 单一数据源 :整个应用的state存储在一棵object tree中,并且这个 object tree 只存在于唯一一个 store中
  • State只读: 惟一改变 state 的方法就是触发 action( 是一个用于描述已发生事件的普通对象)
  • 使用纯函数来执行修改 : 编写reducer描述如何改变state,Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state

相关学习资料

如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux。它包含了示例、样板代码、中间件、工具库,还有很多其它相关内容。
要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件。

基础

Action

  • 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。
  • action 内必须使用一个字符串类型的 type (被定义成字符串常量)字段来表示将要执行的动作.
  • 除了 type 字段外,action 对象的结构完全由你自己决定
  • 我们应该尽量减少在 action 中传递的数据

Reducer

  • Action只是描述有事情发生,Reducer指明如何更新State
  • 把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库

永远不要在 reducer 里做这些操作:
修改传入参数;
执行有副作用的操作,如 API 请求和路由跳转;
调用非纯函数,如 Date.now() 或 Math.random()

  • reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
  • 不要修改 state, 使用 Object.assign() 新建了一个副本
  • 在 default 情况下返回旧的 state
  • 考虑reducer拆分,不要处理state放在一个方法里

Store

Store 有以下职责:

数据流

  • 严格的单向数据流是redux的核心

Redux 生命周期

  1. 调用 store.dispatch(action)
  2. store 调用传入的 reducer 函数
  3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树 combineReducers()
  4. ** store 保存了根 reducer 返回的完整 state 树**

React+Redux

  • 想通过 react-redux
    提供的 connect()方法将包装好的组件连接到Redux。尽量只做一个顶层的组件,或者 route 处理。

发现阮一峰老师写过关于Redux的文章,先收藏下:
Redux 入门教程(一):基本用法
Redux 入门教程(二):中间件与异步操作
Redux 入门教程(三):React-Redux 的用法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容