首页 > 代码库 > Redux学习笔记-基础知识

Redux学习笔记-基础知识

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "Helvetica Neue"; color: #404040 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Georgia; color: #737373 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #737373 } li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } span.s1 { } span.s2 { font: 12.0px Monaco; background-color: #fee9cc } span.s3 { font: 13.0px "Helvetica Neue" } span.s4 { background-color: #fee9cc } ol.ol1 { list-style-type: decimal } ul.ul1 { list-style-type: disc }</style>

 

Redux概述

是什么:Redux是管理状态的容器,提供可预测的状态管理。

怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多。通过分发action触发reduce来处理state。 特点:

  1. 单一数据源。

    整个应用的state是唯一,state的更新引发应用或者组件的更新,在整个程序运行期间,state有且仅有一个。

  1. State只读

    唯一改变state的方法是触发action,在reduce中 重置 state的属性, 3. 纯函数执行修改

    相同的输入对应相同的输出

基础信息

action

action是把数据从应用传到store的有限载荷。其本质上的一个js对象。按照约定,action对象中应该有一个type 字段来表示将要执行的动作,其他属性可以自由定义。 在整个数据流中,action扮演的是一个消息通知者的角色,简单的说就是告知store哪些‘事件’被触发了。redux可以通过reduce根据不同的action来对state做不同的操作。

Reducer

如果说action是‘事件’的话,那么reducer就是‘事件处理器’。 在Redux应用中,所有的state都保存在唯一的对象中。

reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

永远不要在 reducer 里做这些操作:

修改传入参数;

执行有副作用的操作,如 API 请求和路由跳转;

调用非纯函数,如 Date.now() 或 Math.random()。

注意

1.不要修改state。使用新的对象,然后将原有state值拷贝到新对象而不是直接在老对象上更新属性,js对象都是引用,如果在原有state上更新,可能会导致Redux无法正确完成state的diff比较。

2. 默认情况下返回原有state

其他:

使用combineReducers() 来组合reducer。

store

如果说action是‘事件’,reducer是‘事件处理器’,那么store就是全局的事件管理对象。 每个Redux应用都应该只有 一个单一的store。但需要拆分数据处理逻辑时,应该使用Reducer组合而不是创建多个store。

Store主要有以下职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

通过createStore()方法创建store实例,该方法接受两个参数:第一个是reducer,就是action的处理函数,第二个是可选参数,用来设置state的初始状态。

数据流

所有Redux应用中,数据的流向是单向的,具体可以从以下几点来理解:

  1. 分发action
    通过调用store.dispatch(action)来分发action。我们可以在任何地方调用此方法来分发action。
  2. 处理action
    通过store分发的action,被创建store实例时使用的reducer处理。
  3. 合并state

多个Reducer共同处理action后,把state合并成一个新的state对象。 4. 返回新state

最终返回一个新的state对象,Redux应用可以使用该state做其他事情了。

[参考redux官方文档](http://www.redux.org.cn/)

Redux学习笔记-基础知识