手拉手学React：Redux

redux中文网

何为Redux

Redux 是 JavaScript 状态容器，用来存储项目中一些公共的数据，做到数据“一处存储，多处取出”的事情，跟 Vue 的 Vuex 属于一类角色。

它的诞生是为了解决用 React 开发大型项目中解决不了难题。如果你的项目中组件繁多，而且组件之间的通信又必不可少，这个时候 Redux 能很好的解决这个问题。

举个例子，原本组件通信是只有父子通信，如果爷孙俩通信就需要借助“父”来实现：

没有Redux时的组件通信

问题就在于，如果组件非常多，数以千计，再通信性能就非常低，而且也不方便。那这个时候，把大家都需要的数据放在一个公共的地方，谁要谁就去取：

有Redux的通信

这样，不管有多少个组件、组件的层次有多深，都能快速的拿到需要拿的数据。

Redux 工作流程

开篇一张图，内容全靠编：

image

Store 就相当于一个房地产中介一样，我们想要一个地区的所有房源信息，就需要通过它来获取，Reducers 是幕后人，中介的信息来源都是Reducers告诉它的，比喻成一个“房产资源手册”可能更合适。

中介给了用户三个行为：

• getState()：普通用户级别专门获取房源信息的唯一行为。
• dispatch(action)：房东用户级别通知中介，改变自家房源信息(state)的唯一行为。
• subscribe()：普通用户级别如果相中了一套房子，并且告诉中介：“我对你这的房源信息比较感兴趣，你这房源有啥新动向第一时间告诉我一下”，这样就能第一时间收到房源信息(state)改变的消息。

介绍完这些之后，咱们把整个流程串一下：

• 普通用户(React Components)：通过getState()这一行为向中介(store)拿（注意是拿，不是拿到）最新的房源信息，中介接受到消息后，再通过房产资源手册(Reducers)拿到最新的房源信息并反馈给用户。所以，用户最终的信息来源是通过Reducers获取到的。
• 房东用户(React Components)：通过dispatch(action)这一行为向中介发出信息，说：“我要修改我家房源的一些信息，你帮我弄一下”，其中，action.type是必不可少的，这是告诉中介自己房源的标识。然后，中介再把这些信息传给房产资源手册Reducers，然后在手册上对应的位置（该位置通过action.type找到）把对应的数据更改了，最后中介通知已经订阅的用户房源已经更改了(subscribe())。这个角色拥有两种身份：普通用户和房东用户，它既能通过dispatch()修改自己发布到中介store上的房源信息，也能像普通用户一样订阅、获取房源的一切信息。在我这里，一个组件调用了dispatch()就视为房东用户，否则就是普通用户。

这中间也有一些限制，比如action必须拥有type字段，其他属性可能由用户自定义，reducer是一个纯函数，应当遵循纯函数的一些设计理念。

不得改写参数。
不能有异步操作。
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果。（引用自阮一峰）

雇佣中介，自当用户

现在咱们用代码完成以上所述，第一步是需要有中介(store)，才会有用户，所以先创建中介(store)：

import { createStore } from 'redux';
import reducer from './reducer'; // 同时把房产资源手册(reducer)交给中介

const store = createStore(reducer);

export default store;

/**
 * 每次用户手动调用dispatch的时候，会自动调用这个方法
 *
 * <strong>这个方法只能接受state，绝不能修改state，这是明文限制！</strong>
 * @param {Object} state 上一个未改变的state
 * @param {Object} action 当前用户传递过来的action
 * @param {String} action.type action的类型，通过这个类型，得知用户需要改动哪个变量
 * @return {{inputValue: string, list: Array}}
 */
export default function (state = defaultState, action) {
    const newState = JSON.parse(JSON.stringify(state));
    if (action.type === 'CHANGE_INPUT_VALUE') {
        /** @namespace action.value */
        newState.inputValue = action.value;
    } else if (action.type === 'LIST_ADD') {
        newState.list.push(newState.inputValue);
        newState.inputValue = '';
    }
    return newState;
}

先不看房产资源手册(reducer)做了什么事情，第二步就是建立自己的用户(React Components)：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from '../store'; // 第一步：引入中介(store)

class Home extends Component {
    constructor(...args) {
        super(...args);
        this.state = store.getState(); // 第二步：得到全部房源信息
        store.subscribe(() => { // 第三步：这个用户(React components)需要第一时间知道房源的最新动向
            this.setState(store.getState());
        }); // 订阅store，store数据发生改变的时候需要做的事情，这个方法同时会返回一个方法，用来取消订阅
    }
    inputChange = (e) => {
        const action = {
            type: 'CHANGE_INPUT_VALUE',
            value: e.target.value
        };
        store.dispatch(action);
    };
    btnSubmit = () => {
        store.dispatch({
            type: 'LIST_ADD'
        }) // 第四步：升级为房东，通知中介(store)修改自己的房源信息，这里对应房产资源手册的代码逻辑
    };
    render() {
        return (
            <div style={{ margin: '10px' }}>
                <Input
                    value={this.state.inputValue}
                    placeholder="Basic usage"
                    style={{ width: '300px' }}
                    onChange={this.inputChange}
                />
                <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.btnSubmit}>提交</Button>
                <List
                    style={{ marginTop: '10px', width: '300px' }}
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
            </div>
        );
    }
}

export default Home;

代码优化

需要将上面action.type值单独提出来放在一个常量文件里，组件中和reducer里就更不容易出错。

统一创建action：

// actionCreateor.js
const defaultField = 'value'; // action默认的扩展字段
/**
 * 统一创建action
 * @param {String} type 类型
 * @param {any} value 值
 */
export function createAction(type, value) {
    if (!type) throw new Error('【非法参数】type必须是一个合法的参数值，当前type值是：' + type);
    let action = { type };
    switch (typeof value) {
        case 'object': {
            action = Object.assign(action, value);
            break;
        }
        default: {
            action[defaultField] = value;
        }
    }
    return action;
}