7、redux 的基础概念

redux 的基础概念

1、三个基本原则

• 整个应用只有唯一一个可信数据源，也就是只有一个 Store
• State 只能通过触发 Action 来更改
• State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer

2、Actions

• 一个单纯的包含 { type, payload } 的对象，type 是一个常量用来标示动作类型，payload 是这个动作携带的数据。
• Action 需要通过 store.dispatch() 方法来发送。
• 一般来说，会使用函数（Action Creators）来生成 action。Action Creators 最后会返回一个 action 对象：

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

3、Reducers

Reducer 用来处理 Action 触发的对状态树的更改。
一个 reducer 函数会接受 oldState 和 action 两个参数，返回一个新的 state：(oldState, action) => newState

const initialState = {
  a: 'a',
  b: 'b'
};

function someApp(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_A':
      return { ...state, a: 'Modified a' };
    case 'CHANGE_B':
      return { ...state, b: action.payload };
    default:
      return state
  }
}

状态树上的每个字段都有一个 reducer 函数来管理就可以拆分成很小的 reducer

function someApp(state = {}, action) {
  return {
    a: reducerA(state.a, action),
    b: reducerB(state.b, action)
  };
}

4、Store

Store 的作用

• Hold 住整个应用的 State 状态树
• 提供一个 getState() 方法获取 State
• 提供一个 dispatch() 方法发送 action 更改 State
• 提供一个 subscribe() 方法注册回调函数监听 State 的更改

import { createStore } from 'redux';
import someApp from './reducers';
let store = createStore(someApp);

let unsubscribe = store.subscribe(() => console.log(store.getState()));

// Dispatch
store.dispatch({ type: 'CHANGE_A' });
store.dispatch({ type: 'CHANGE_B', payload: 'Modified b' });

// Stop listening to state updates
unsubscribe();

5、Data Flow

store.dispatch(action) -> reducer(state, action) -> store.getState() 其实就构成了一个“单向数据流”

1. 调用 store.dispatch(action)

可以在任何地方调用 store.dispatch(action)，比如组件内部，Ajax 回调函数里面等等

2. Action 会触发给 Store 指定的 root reducer

root reducer 会返回一个完整的状态树，State 对象上的各个字段值可以由各自的 reducer 函数处理并返回新的值。

• reducer 函数接受 (state, action) 两个参数
• reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新并返回一个新的 state

3. Store 会保存 root reducer 返回的状态树

新的 State 会替代旧的 State，然后所有 store.subscribe(listener) 注册的回调函数会被调用，在回调函数里面可以通过 store.getState() 拿到新的 State。