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。