本文会讲Redux 架构，包含基本概念的介绍和用法，以及redux原理。
github.com/reduxjs

你可能不需要 Redux

首先明确一点，Redux 是一个有用的架构，但不是非用不可。
曾经有人说过这样一句话。

如果你不知道是否需要 Redux，那就是不需要它。
只有遇到（React）实在解决不了的问题，你才需要 Redux 。

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

用户的使用方式非常简单
用户之间没有协作
不需要与服务器大量交互，也没有使用 WebSocket
视图层（View）只从单一来源获取数据

如果：

用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了WebSocket
View要从多个来源获取数据

上面这些情况才是 Redux 的适用场景：多交互、多数据源。

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。比如，如果是React，还可以使用Recoil。

设计思想

（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。

基本概念和API

store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。

state

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState()拿到。

Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

const action = {   
  type: 'ADD_TODO',   
  payload: 'Learn Redux' 
}; 
复制代码

可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

Action Creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO'; 

function addTodo(text) {   
  return {     
    type: ADD_TODO,     
    text   
  } }；
  
const action = addTodo('Learn Redux'); 
复制代码

上面代码中，addTodo函数就是一个 Action Creator。

思考：
上面的代码在书写上并没有减少多少代码，看上去好像没有什么用处。那上面的写法到底有什么好处呢？用上面的写法我们无需dispatch的时候每次都写action，达到了复用的效果，也会减少出错。

store.dispatch

store.dispatch()是 View 发出 Action 的唯一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});
复制代码

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function (state, action) {
  // ...
  return new_state;
};
复制代码

整个应用的初始状态，可以作为 State 的默认值。下面是一个实际的例子。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});
复制代码

上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。

const actions = [
  { type: 'ADD', payload: 0 },
  { type: 'ADD', payload: 1 },
  { type: 'ADD', payload: 2 }
];

const total = actions.reduce(reducer, 0); // 3
复制代码

如果按照上面的解释可以帮助理解的话，那可以按照上面的去理解。如果别人问你reducer到底是什么呢？怎么用一句话准确描述出来reducer的作用呢？

reducer定义了数据的更新规则。

那combineReducers是什么呢？
如果项目中的reducer很大，维护起来很不方便，可以把reducer拆分成子reducer，combineReducers就是把子reducer合成一个总的reducer。

原理

createStore 和 combineReducers

function createStore(reducer, initialState) {
    let currentState = initialState;

    const getState = () => currentState;
    let listeners = [];

    const subscribe = (sub) => {
        listeners.push(sub);

        // 取消订阅
        return () => {
            let index = listeners.findIndex((s) => s === sub);
            if(index !== -1) {
                listeners.splice(index, 1);
            }
        }
    }

    const dispatch = (action) => {
        const newState = reducer(currentState, action);

        if(newState !== currentState) {
            currentState = newState;

            listeners.forEach((sub) => {
                sub && sub();
            });
        }
    }


    return {
        getState,
        dispatch,
        subscribe
    };
}

function combineReducers(reducers){
    const reducerKeys = Object.keys(reducers);
    const finalReducers = {};

    // 去除reducers中不是函数的属性
    reducerKeys.forEach((key) => {
        if(typeof reducers[key] === 'function') {
            finalReducers[key] = reducers[key];
        }
    });

    return function combination(state, action) {
        let hasChanged = false;
        const nextState = {};

        Object.keys(finalReducers).forEach((key) => {
            const reducer = finalReducers[key];

            const previousStateForKey = state[key];
            const nextStateForKey = reducer(previousStateForKey, action);

            if(nextStateForKey == null) {
                throw new Error('When called with an action, the reducer returned undefined');
            }

            nextState[key] = nextStateForKey;
            hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
        });

        hasChanged = hasChanged || Object.keys(state).length !== Object.keys(nextState).length;

        return hasChanged ? nextState : state;
    };;
}

export {
    createStore,
    combineReducers
};
复制代码

combineReducer的简洁实现

const combineReducers = reducers => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce(
      (nextState, key) => {
        nextState[key] = reducers[key](state[key], action);
        return nextState;
      },
      {} 
    );
  };
}
复制代码

上面我们实现了自己的redux，主要包含了createStore和combineReducers，那能不能使用起来呢？验证一些我们实现的是不是和真正的redux一样？

在html中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            border: 1px solid green; 
            margin: 20px;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <div class="con">
            <button id="btnAdd">增加</button>
            <button id="btnMinus">减少</button>
            <button id="btnCancel">取消</button>
            <div>
                <span id="span1">
                </span>
            </div>
        </div>
        <div class="con">
            <input id="msgInput" type="text"/>
            <button id="btnMsg">改变</button>
            <div>
                <span id="msg2">
                </span>
            </div>
        </div>
    </div>
    <script type="module">
        import { createStore, combineReducers } from './redux.js';

        function counterReducer(state, action){
            switch(action.type) {
                case 'ADD':
                    return {
                        counter: state.counter + Number(action.payload)
                    };
                case 'MINUS':
                    return {
                        counter: state.counter - Number(action.payload)
                    };
                default:
            }

            return state;
        }

        function messageReducer(state, action){
            switch(action.type){
                case 'CHANGEMSG':
                    return {
                        msg: action.payload
                    };
                default:
            }

            return state;
        }

        const reducer = combineReducers({
            count: counterReducer,
            message: messageReducer
        });
        const store = createStore(reducer, {
            count: {
                counter: 0
            },
            message: {
                msg: ''
            }
        });

        let btnAdd = document.querySelector('#btnAdd');
        let btnMinus = document.querySelector('#btnMinus');
        let btnCancel = document.querySelector('#btnCancel');
        let btnMsg = document.querySelector('#btnMsg');

        btnAdd.onclick = function(){
            store.dispatch({
                type: 'ADD',
                payload: 1
            });
        }
        btnMinus.onclick = function(){
            store.dispatch({
                type: 'MINUS',
                payload: 1
            });
        }
        btnCancel.onclick = function(){
            unsubscribe();
        }

        btnMsg.onclick = function(){
            let input = document.querySelector('#msgInput');

            if(input.value) {
                store.dispatch({
                    type: 'CHANGEMSG',
                    payload: input.value
                });
            }
        }
        

        const unsubscribe = store.subscribe(() => {
            renderDOM();
        });

        function renderDOM(){
            let state = store.getState();
            console.log(state);

            let span1 = document.querySelector('#span1');
            span1.innerHTML = state.count.counter;

            let msg = document.querySelector('#msg2');
            msg.innerHTML = state.message.msg;
        }
        renderDOM();
    </script>
</body>
</html>
复制代码

在react中使用

我们以react为例来使用我们自己的redux，实际上我们可以在任何javascript框架中使用我们自己的redux，这里只是以react为例。

redux/index.js

import { createStore, combineReducers } from './redux';

export const countReducer = (state, action) => {
    switch (action.type) {
        case 'ADD':
            return {
                count: state.count + action.payload
            };
        case 'MINUS':
            return {
                count: state.count - action.payload
            };
        case 'RESET':
            return {
                count: 0
            };
        default:
            return state
    }
}

export const msgReducer = (state, action) => {
    switch (action.type) {
        case 'CHANGE':
            return {
                msg: action.payload
            };
        default:
            return state
    }
}

const reducer = combineReducers({
    counter: countReducer,
    message: msgReducer
});

export default createStore(reducer, {
    counter: {
        count: 0
    },
    message: {
        msg: ''
    }
 });
复制代码

components/ReduxPage.js

import React, { Component } from 'react';
import store from '../redux';

export default class ReduxPage extends Component {
    constructor(props){
        super(props);
    }

    addBtnClick = ()=>{
        store.dispatch({
            type: 'ADD',
            payload: 1
        });
    }

    componentDidMount(){
        store.subscribe(() => {
            this.forceUpdate();
        });
    }

    render() {
        const { count } = store.getState().counter;
        
        return (
            <div>
                <div>
                    <span>{count}</span>
                    <button onClick={ this.addBtnClick }>增加</button>
                </div>
            </div>
        )
    }
}
复制代码

components/ReduxPage2.js

import React, { Component } from 'react';
import store from '../redux';

export default class ReduxPage2 extends Component {
    constructor(props){
        super(props);

        this.state = {
            value: ''
        };
    }

    msgChange = ()=>{
        if (this.state.value) {
            store.dispatch({
                type: 'CHANGE',
                payload: this.state.value
            });
        }
    }

    input = (e) => {
        if(e.target.value) {
            this.setState({
                value: e.target.value
            });
        }
    }

    componentDidMount(){
        store.subscribe(() => {
            this.forceUpdate();
        });
    }

    render() {
        const { value } = this.state;
        const { msg } = store.getState().message;

        return (
            <div>
                <div>
                    <input type="text" value={value} onInput={ this.input }/>
                    <button onClick={ this.msgChange }>改变</button>
                </div>
                <span>{ msg }</span>
            </div>
        )
    }
}
复制代码

app.js

import logo from './logo.svg';
import './App.css';
import ReduxPage from './components/ReduxPage';
import ReduxPage2 from './components/ReduxPage2';

function App() {
  return (
    <div className="App">
      <ReduxPage/>
      <ReduxPage2/>
    </div>
  );
}

export default App;
复制代码