Redux使用

思想

应用中所有的state都以一个对象树的形式储存在一个单一的store中。唯一能改变state的办法是触发action，一个描述发生什么的对象。为了描述action如何改变state树，需要编写reducers。

Redux只有一个单一的store和一个根级的reduce函数(reducers)。随着应用的不断增大，应该把根级的reducer拆分成多个小的reducers，分别独立的操作state树的不同部分，而不是添加新的stores。

三大原则

单一数据源

整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中。来自服务端的state可以在无需编写更多代码的情况下被序列化并注入到客户端中。

State是只读的

唯一改变state的方法就是出发action，action是一个用于描述已发生事件的普通对象。这样确保了视图和网络请求都不能直接修改state，相反它们只能表达想要修改的意图。

使用纯函数来执行修改

为了描述action如何改变state tree，需要编写reducers。Reducer只是一些纯函数，它接受先前的state和action，并返回新的state。

基础

Action

Action是把数据从应用传到store的有效载荷。它是state数据的唯一来源。一般通过store.dispatch()将action传到store。Action本质上是JavaScript普通对象。action内必须有一个字符串类型的type字段来表示将要执行的动作。多数情况下type会被定义成字符串常量。当应用规模变大时，可以使用单独的模块或文件存放action。

我们还需要添加一个action index字段来表示用户完成任务的动作序列号。因为数据是存放在数组中的，所以我们通过下标index哎引用特定的任务。而实际项目中一般会在新建数据的时候生成唯一的ID作为数据的引用标识。

{
    type: TOGGLE_TODO,
    index:5
}

我们应该尽量减少在action中传递的数据。传递index比传递整个任务对象要好。

Action创建函数

Action创建函数就是生成action的方法。在Redux中的action创建函数只是简单的返回一个action：

function addTodo(text) {
    return {
        type: ADD_TODO,
        text
    }
}

这样做是action创建函数更容易被移植和测试。在传统的Flux中，当调用action创建函数时，一般会触发一个dispatch：

function addTodoWithDispatch(text) {
    const action = {
        type: ADD_TODO,
        text
    }
    dispatch(action)
}

Redux中只需要把action创建函数的结果传递给dispatch()方法即可触发一次dispatch过程：

dispatch(addTodo(text))
dispatch(completeTodo(index))

或是创建一个被绑定的action来自动dispatch：

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

store里能直接通过store.dispatch()调用dispatch()方法，但是多数情况下会使用react-redux提供的connect()帮助器来调用。BindActionCreators()可以自动把多个action创建函数绑定到dispatch()方法上。

Reducer

Reducers指定了应用状态的变化如何响应actions并发送到store，actions只是描述了有事情发生了这一事实，并没有描述应用如何更新state。

在Redux应用中，所有的state都被保存在一个单一对象中，在写代码前应该先想一下这个对象的结构。如何才能以最简的形式把应用的state用对象描述出来。

以todo应用为例，需要保存两种不同的数据：

• 当前选中的任务过滤条件；

• 完整的任务列表。

通常这个state树还需要存放其它的一些数据，以及一些UI相关的state。尽量把这些数据与UI相关的state分开。

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'keep all state in a single tree',
      completed: false
    }
  ]
}

Action处理

确定了state对象的结构，就可以开始开发reducer。reducer就是一个纯函数，接受旧的state和action，返回新的state。

(previousState, action) => newState

保持reducer纯净非常重要，所以永远不要在reducer中做这些事：

• 修改传入参数；

• 执行有副作用的操作；

• 调用非纯函数。

只要传入参数相同，返回计算得到的下一个state就一定相同。没有特殊情况，没有副作用，没有API请求，没有变量修改，单纯执行计算。

Store

使用action来描述“发生了什么”，使用reducer来根据action更新state的用法。Store就是把它们联系在一起的对象。Store有以下职责：

• 维持应用的state；

• 提供getState()方法获取state；

• 提供dispatch()方法更新state；

• 通过subscribe(listener)注册监听器；

• 通过subscribe(listener)返回的函数注销监听器。

Redux应用只有一个单一的store。当需要拆分数据逻辑时，应该使用reducer组合而不是创建多个store。

数据流

严格的单向数据流是Redux结构的核心设计。

这意味着应用中所有的数据都遵循相同的声明周期，这样可以让应用变得更加可预测且同意理解。同时也鼓励做数据规范化，这样可以避免使用多个独立且无法相互引用的重复数据。

Redux应用中数据的声明周期遵循4个步骤：

1、调用store.dispatch(action)。

2、Redux store调用传入的reducer函数。

3、根reducer应该把多个子reducer输出合并成一个单一的state树。

4、Redux store保存了根reducer返回的完整state树。

搭配React

Redux支持React、Angular、Ember、JQuery甚至是纯JavaScript。但是React允许以state函数的形式来描述界面，Redux通过action的形式来发起state变化。

安装React-Redux：

npm install --save react-redux

Redux的React绑定库是基于容器组件和展示组件相分离的开发思想，这个思想非常重要。

	展示组件	容器组件
作用	描述如何展现（骨架、样式）	描述如何运行（数据获取、状态更新）
直接使用Redux	否	是
数据来源	props	监听Redux state
数据修改	从props调用回调函数	向Redux派发actions
调用方式	手动	通常由React Redux生成

大部分的组件都应该是展示型的，但一般需要少数的几个容器组件把它们和Redux store连接起来。

例如，我们想要显示一个todo项的列表。一个todo项被点击后，会增加一条删除线并标记为completed。我们会显示用户增加一个todo字段。在footer里显示一个可切换的显示全部/只显示completed的/只显示incompleted的todos。

展示组件和他们的props：

• TodoList用于显示todos列表。

  • todos: Array以{ text, completed }形式显示的todo项数组。

  • onTodoClick(index: number)当todo项被点击时调用的回调函数。

• Todo一个todo项。

  • text: string显示的文本内容。

  • completed: booleantodo项是否显示删除线。

  • onClick()当todo项被点击时调用的回调函数。

• Link带有callback回调功能的链接。

  • onClick()当点击链接时会触发。

• Footer一个允许用户改变可见todo过滤器的组件。

• App根组件，渲染余下的所有内容。

这些组件只定义外观不关心数据来源和如何改变。传入什么就渲染什么。如果把代码从Redux迁移到别的结构。这些组件可以不做任何改动的直接使用。

容器组件：

还需要一些容器组件来把展示组件连接到Redux。例如，展示型的TodoList组件需要一个类似VisibleTodoList的容器来监听Redux store变化并处理如何过滤出要显示的数据。为了实现状态过滤，需要实现FilterLink的容器组件来渲染Link并在点击时触发对应的action：

• VisibleTodoList根据当前显示的状态来对todo列表进行过滤，并渲染TodoList。

• FilterLink得到当前过滤器并渲染Link。

  • filter: string就是当前过滤的状态。

其它组件：

有时候表单和函数严重耦合在一起，很难分清该使用容器组件还是展示组件：

• AddTodo含有“Add”按钮的输入框。