前言

你并不一定需要 Redux 。如果你的应用场景还不够复杂，引入 Redux 只会徒增成本。

Flux 设计模式

学习 Redux 之前需要了解 Flux 设计模式。 Flux 模式是 Facebook 提出的一种架构模式，其中最重要的思想是单向数据流。

Flux

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 (
        
            
        
    );
}

创建 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,
    navigation: NavigationScreenProp,
    addTask: (name: string, startTime: number, endTime: number) => void;
}

class TodosScreen extends React.Component {
    ...
}

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

05-Redux

前言