Redux

目录：

• 分析

• Redux 三大原则

• Redux 原理

• Redux 工作流程

分析

在 jQuery 时代的时候，我们是面向过程开发。随着 react 的普及，我们提出状态驱动 UI 的开发模式。

我们认为：Web 应用就是状态与 UI 一一对应的关系。但是随着我们的 web 应用日趋的复杂化，一个应用所对应的背后的 state 也变得越来越难以管理。而 redux 就是 web 应用的一个状态管理方案。Redux 是 Flux 思想的一种实现，同时又在其基础上做了改进。其主要体现在：

• 单向数据流
• Store 是唯一的数据源

Redux 三大原则

• 单一数据源
• State 只读
• 使用纯函数来修改

Redux 原理

Redux 源码主要分为几个模块文件：

• compose.js 提供从右到左进行函数式编程
• createStore.js 提供作为生成唯一 store 的函数
• combineReducers.js 提供合并多个 reducer 的函数，保证 store 的唯一性
• bindActionCreators.js 可以让开发者在不直接接触 dispatch 的前提下进行更改 state 的操作
• applyMiddleware.js 这个方法可以通过中间件来增强 dispatch 的功能

const actionTypes = {
    ADD: 'ADD',
    CHANGEINFO: 'CHANGEINFO',
}

const initState = {
    info: '初始化',
}

export default function initReducer(state=initState, action) {
    switch(action.type) {
        case actionTypes.CHANGEINFO:
            return {
                ...state,
                info: action.preload.info || '',
            }
        default:
            return { ...state };
    }
}

export default function createStore(reducer, initialState, middleFunc) {

    if (initialState && typeof initialState === 'function') {
        middleFunc = initialState;
        initialState = undefined;
    }

    let currentState = initialState;

    const listeners = [];

    if (middleFunc && typeof middleFunc === 'function') {
        // 封装dispatch
        return middleFunc(createStore)(reducer, initialState);
    }

    const getState = () => {
        return currentState;
    }

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

        listeners.forEach(listener => {
            listener();
        })
    }

    const subscribe = (listener) => {
        listeners.push(listener);
    }

    return {
        getState,
        dispatch,
        subscribe
    }
}

Redux 工作流程

1. const store = createStore(fn) 生成数据；
2. action: { type:Symbol('action001'), payload:'payload1' } 定义行为；
3. dispatch 发起 action：store.dispatch(doSomethingfn('action001'));
4. reducer 处理 action，返回新的 state；

换句话解释是：

• 首先，用户(通过 view)发出 action，发出方式用到了 dispatch 方法
• 然后，store 自动调用 reducer，并且传入两个参数：当前 state 和收到的 action，reducer 会返回新的 state
• state 一旦有变化，store 就会调用监听函数，来更新 view。
  
  

所有《每日一题》的 知识大纲索引脑图 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转