前言
你并不一定需要 Redux 。 如果你的应用场景还不够复杂，引入 Redux 只会徒增成本。
Flux 设计模式
学习 Redux 之前需要了解 Flux 设计模式。 Flux 模式是 Facebook 提出的一种架构模式，其中最重要的思想是单向数据流。
- Action: 规范化所有的动作。数据的修改、UI 的变化都由 Action 触发.
- Dispatcher: Action 的分发器，将 Action 传递给 Store
- Store：存放数据、状态和逻辑处理。
- View: 根据 Store 的变化进行渲染
Redux
本篇篇幅有限，主要介绍 Redux 中的一些核心概念帮助快速理解上手。网上有很多资料都详细介绍了 Redux 的各个部分。React 小书 这份文档详细介绍了 React 和 Redux 的原理
Store & Action & Reducer & Dispatcher
Redux 采用单一数据源的模式，整个工程全局只有一个 Store。Store 内存储全局数据和状态，我们用 State 来表示。State 对外是只读的。State 的修改只能通过接收不同的 Action 来触发。我们写一些纯函数来处理不同的 Action，修改完值后返回一个新的 State，这种纯函数叫 Reducer。
public reducer(state, action) {
switch (action.type) {
case type1:
return state1;
case type2:
return state2;
default:
return state;
}
}
Store 会有一个 dispatch 方法，用于分发 action 到对应的 reducer 上。
store.dispatch(action);
以上即是 Redux 最核心的一些概念，分别和 Flux 的设计图的概念一一对应。但是仅有这些东西，在工程实践上仍然不是很方便，下面我们再看下怎么把这些东西分别应用到业务中的各个场景下。
集成
yarn add redux react-redux
创建 Store
全局只有一个 Store，所以需要在进入应用之前创建 Store 对象，并作用到全局。
import { createStore } from 'redux';
const store = createStore(reducer);
react-redux 库提供了一个 Provider 组件，专门负责将 Store 作用于全局。
import { Provider } from 'react-redux';
function Application() {
return (
<Provider store={store}>
<AppContaienr />
</Provider>
);
}
创建 Reducer
创建 store 对象时需要关联上对应的 reducer. 前面说过，reducer 就是用于修改 state 的纯函数.
export default (state = initialState, action: Action): State => {
switch (action.type) {
case ACTION_TYPE_INIT:
return initialState;
case ACTION_TYPE_ADD_TASK:
return {
...state,
tasks: addTask(state.tasks, action)
};
case ACTION_TYPE_EDIT_TASK:
return {
...state,
tasks: changeTask(state.tasks, action)
}
}
return state;
}
业务逻辑比较庞大的时候，我们不可能把所有 action 判断都放在一个 reducer 内，可以根据类型拆分成很多个 reducer。redux 提供了一个 combineReducers 的工具来做 reducer 的合并。
import {createStore, combineReducers} from 'redux';
import * as reducers from '../reducers';
const reducer = combineReducers(reducers);
const store = createStore(reducer);
Action
Action 其实只是一个普通对象，不过按照约定俗成的习惯，每个 action 都会有一个 type 属性。
export interface Action {
type: string;
[prop: string]: any;
}
根据不同的场景创建不同的 Action 对象扔给 Store 做分发即可触发 State 的需改。State 的变化最终又会反馈到 UI 的变化上。但是每次都手动 new 一个 Action 对象很麻烦，而且容易造成代码耦合。我们可以设置一些函数专门用来创建不同的 action。
export function addTask(name: string, startTime: number, endTime: number, desc?: string, ): Action {
return {
type: ACTION_TYPE_ADD_TASK,
name,
startTime,
endTime,
desc,
} as Action;
}
这类函数叫 ActionsCreators.
connect 函数
在前文中提到过 Smart 组件和 Dumb 组件。在开发中我们尽量将组件 Dumb 化，Smart 组件用于组合 Dumb 组件和实现业务逻辑。但是现在我们已经将业务逻辑迁移到了 reducer 中了，也就没有了 Smart 组件存在的必要了。
剩下需要做的就是怎么将 Store 中的 State 与 Dumb 组件中的 props 关联起来。这里需要用到 react-redux 中的 connect 辅助函数。
connect([mapStateToProps], [mapDispatchToProps])
connect 函数接受两个可选参数。mapStateToProps 和 mapDispatchToProps.
mapStateToProps
Component 的渲染需要由父组件传递 props， props 的真实值存储在 State 中，所以这里实现一个 mapStateToProps 函数，设置好当前 Component 所需要的 props 分别对应 state 中的哪些属性。
(state: State) => ({ tasks: state.tasks })
mapDispatchToProps
当 Component 触发了一些操作需要修改 State 时，需要反向发起 Action。 但是对于 Dumb 组件来说，它只需要关心把对应的数据传递出去即可。所以 Component 接受的应该是一个 function，触发操作只需要调用 function。 而 function 是由外部实现，封装一个 action，并调用 dispatch，这就是 mapDispatchToProps 函数。
dispatch => ({
addTask: (name: string, startTime: number, endTime: number) => dispatch(addTaskAction(name, startTime, endTime))
})
再看下完整一点的代码：
interface Prop {
tasks: Array<Task>,
navigation: NavigationScreenProp<NavigationState>,
addTask: (name: string, startTime: number, endTime: number) => void;
}
class TodosScreen extends React.Component<Prop> {
...
}
export default connect((state: State) => ({
tasks: state.tasks
}), dispatch => ({
addTask: (name: string, startTime: number, endTime: number) => dispatch(addTaskAction(name, startTime, endTime))
}))
(TodosScreen);
Redux 中间件
Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点。我们可以通过集成第三方或自己实现的中间件来扩展功能。
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore); //创建中间件
const store = createStoreWithMiddleware(reducer);
可以根据需求加入不同类型的中间件。
参考
- Redux 中文文档
- React 小书
- 以上代码已传至 Github: ReactNativeTodos
