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。

你可能感兴趣的:(React入门之路)