优雅地乱玩Redux: Getting Started

原创文，最初发布于 szhshp的第三边境研究所 , 转载请注明

个人笔记, 基于官方英文教程, 添加了一些批注, 有一些单词翻译起来真困难

Redux基于严格单向数据流实现
反正就是为了打破React自身的数据流而创建的

LifeCycle

1. 调用store.dispatch(action)

• 可以在任何地方调用这个函数，只要引用store进来就可以了.
  • 甚至可以在AJAX callback中, 或者setInterval里面调用

action的格式如下:

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

通过这个action对于用户操作的描述可以变得非常的具象

2. Reducer接收Action

默认会提交两个参数给Reducer:

1. 当前State
2. 第一步提供给dispatcher的参数action

3. Root Reducer会将所有sub reducer的结果给结合起来并返回

参考下文提到的combineReducers()的使用示例

4. Redux会保存最后结合起来了的State并且调用各个监听器

现在这个时候已经获取到了下一个状态了

如果我使用store.subscribe(listener)注册了个监听器，会在这个时候被调用，并且可以通过store.getState()获取到当前的状态

最后通过更新之后的状态刷新UI

Key Concepts

• 使用Pure Function来描述State变化
• 即通过各种Dispatcher将状态变化的请求提交给reducer来处理, reducer仅仅返回下一个状态

pure function: 可以根据传入的值预测结果，并且不会影响其他值, 即不改变传入的值也不会创建闭包

• 因为reducer是一个pure function, 里面不应该对任何状态进行修改
• 所有的状态变化通过一个大的Dispatcher进行分发
• 因此所有的状态变化都应该提交到这个Dispatcher上面, 这样就不会出现不同层次的混乱的数据流了

Reducer

基本格式:

(previousState, action) => newState

必须满足以下几点:

1. 不能够修改传入的值
2. 不应该提交额外的API/Http请求
3. 调用一些non-pure function, 比如Date.now() 或者 Math.random()(这些函数的结果无法预料)
4. 可以根据传入的参数，确定传回来的值

一个详细一点的例子:

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

• 会根据会根据传入的action的类型进行不同的处理
• 另外action不一定要字符串，可以传更多类型，甚至可以传一个obj进来
• 记住一定要返回新的状态, 一定要覆盖到所有的情况

关于多个同级Reducer

可以通过combineReducers函数返回多个sub-Reducer, 例如上面返回了a和b两个reducer

import { combineReducers } from 'redux'

const a = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    default:
      return state
  }
}

const b = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 2
    default:
      return state
  }
}

const e = combineReducers({
  a,
  b
})
 
export default e

如果我们在reducer里面提供了多个函数
那么当我们分发一个特定动作的时候, 比如

console.log( store.dispatch({type: 'INCREMENT'}) )

这个动作就会提交到所有的函数之上, 也就是说, 上方a会接收这个动作，b也会接受这个动作，然后以下面的格式进行返回:

{ 
  a: 1,  //经过a处理之后的状态
  b: 2   //经过b处理之后的状态
}

类似于用参数{state, action}便利并执行了整个reducer里面所有reducer函数

Store

用于分发Action到Reducers, 他需要做这样的操作

1. 获取这个应用的状态
2. 可以通过getState()获取到状态
3. 可以通过dispatch(action)来分发动作
4. 可以通过subscribe(listener)来注册监听器

• 并且还要通过subscribe(listener)的返回值决定是否接触监听器

创建Store的例子:

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)