redux源码学习以及实现（一）- 实现自己的redux和redux-thunk

小咪咪 2022-05-01 13:58 254阅读 0赞

# 写在前面 #

一直听说redux的源码量小精巧，一直想手动实现的一个redux，并且学习下官方的实现，以求精进自己的编程水平。为了增加自己的学习效果，我把本次学习分成了两个步骤：

1.  在看源码之前，只根据以前用过的redux和redux-thuk的api，先实现一个redux和redux-thunk出来。只要能够正常运行，用于以前的项目即可。
2.  阅读redux的官方实现，对比参照自己的实现，查看思路上的异同，实现的细节，对一些问题的解决思路。最后，总结自己实现的不足，以及官方redux实现的优秀之处。

# 正文 #

## 实现 ##

### 一个简单的todoList应用 ###

*  手动实现的redux的完成标准就是至少支持App.jsx使用的所有功能。

// App.jsx
    import React from 'react';
    
    import store from './store';
    
    class App extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = store.getState();
            store.subscrible(() => {
                // 订阅，当store产生更新时，拿到新的state
                this.setState(store.getState());
            });
        }
    
        handleInputOnChange(evt) {
            // 更新inputValue的值
            const inputValue = evt.target.value;
            store.dispatch({
                type: 'input',
                payload: inputValue,
            })
        }
    
        handleButtonOnClick() {
            // 添加内容到todoList
            store.dispatch({
                type: 'add',
            })
        }
    
        componentDidMount() {
            // 模仿挂载时请求远程数据，传入一个异步函数类型的action
            store.dispatch((dispatch) => {
    
                new Promise((resolve) => {
                    setTimeout(() => {  // 模仿异步ajax请求
                        const todoData = ['1', '2, ', '3'];
                        resolve(todoData);
                    }, 2000);
                })
                    .then((todoList) => {
                        dispatch({
                            type: 'init',
                            payload: todoList,
                        })
                    });
            });
        }
    
        render() {
            const { todoList, inputValue } = this.state;
            return (
                <div>
                    <input type="text" 
                        value={inputValue} 
                        onChange={this.handleInputOnChange.bind(this)} 
                    />
                    <button 
                        onClick={this.handleButtonOnClick.bind(this)}
                    >ADD</button>
                    <ul>
                        {todoList.map((content, index) => (
                            <li key={index}>{content}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    }
    
    export default App;
    复制代码

### 创建store以及手动实现redux-thunk ###

// store.js
    
    const reduxThunk = (stroe) => {
        // redux中间件
        const currentAction = stroe.__action;
        // 拿到传入的action对象
        if (typeof currentAction  === 'function') {
            currentAction(store.dispatch);
            stroe.__action = {};
            // 设置action为空对象，防止后续中间件处理函数类型的action出错
        }
    };
    
    const defaultState = {
        todoList: ['defaultTodo1', 'defaultTodo2'],
        inputValue: 'defaultValue',
    }
    
    const reducer = (state = defaultState, action) => {
        switch (action.type) {
            case 'add': {
                return {
                    inputValue: '',
                    todoList: [state.inputValue, ...state.todoList],
                };
            }
            case 'input': {
                return {
                    ...state,
                    inputValue: action.payload,
                }
            }
            case 'init': {
                return {
                    ...state,
                    todoList: action.payload,
                }
            }
            default: return state;
        }
    };
    
    const store = createStore(reducer, reduxThunk);
    
    export default store;
    复制代码

### 实现redux ###

// redux/index.js
    
    export const createStore = (reducer, ...middleWares) => {
        const store = {
            __state: undefined,
            __action: undefined,  
        };
        // 将action和state挂载到store上，这使得无论多少中间件访问和修改的都是同一个state，action对象
        const subscribedCallbacks = []; // 订阅的回调函数
    
        const getState = function() {
            return this.__state;
        }
    
        const dispatch = function(action) {
            this.__action = action; // 挂载
            middleWares.forEach(mid => mid(store)); // 按顺序触发中间件
            const newState = reducer(this.__state, this.__action); // 产生新的state
            this.__action = undefined; // 清空
            this.__state = newState; // 设置新的state
            subscribedCallbacks.forEach(cb => cb()); // 触发订阅的回调函数
        }
    
        const subscrible = function(cb) {
            subscribedCallbacks.push(cb);
        }
    
        store.getState = getState.bind(store);
        store.dispatch = dispatch.bind(store); 
        // 绑定this，因为dispatch被调用时不一定是通过.语法,即store.dispatch这样调用的
        store.subscrible = subscrible.bind(store);
    
        store.dispatch({});
        // 手动触发拿到reducer提供的默认state
        return store;
    }
    复制代码

## 实现思路 ##

### getState ###

没什么好说的，直接返回当前存储的state就好了。

### subscrible ###

这个也没什么好说的，把传入的回调函数，存储到一个数组里，更新state后，遍历调用即可。

### dispatch ###

手动实现的redux大部分逻辑都在这里，首先接收到action，把action挂载store对象上，然后开始触发中间件(把store传入中间件)，中间件至少可以访问传入的action然后对其做一些操作，否则中间件就没意义了。 随后把当前的state和处理后的action传入reducer计算出新的state，然后触发订阅的回调函数。

这里注意，平常在使用dispatch时，很少通过 **obj.dispatch调用** 且obj也不一定是store，所以要特别注意 **this** 的指向问题，因此使用 **bind** 手动绑定下this为store。

#### 问题： ####

*  如何修改action本身，而非在action对象上增添属性

##### 场景： #####

用过redux-thunk的人都知道，thunk给了redux处理函数类型action(即传入的action不是一个\{\}而是一个function)的能力，所以当你传入一个函数类型的action类型时，thunk调用了这个函数，把dispatch方法传给这个函数。此时就出现了问题，我不知道官方redux中间件是怎么设计的，比如提供了中间件可以中断中间件调用流程的方法。不管怎样，手动实现的redux会对一个action按顺序调用所有的中间件处理，而其他中间件期望得到的是一个object，而不是一个函数，所以中间件应该通过一种途径访问action，并且能够修改action，使得下一次再访问时访问的是新的action。

于是，我就把action对象挂载到store对象上，每一个中间件都通过store对象访问action（调用形式：someMiddleWare(store)），而不是直接传入action(调用形式：someMiddleWare(store, action))。

于此，手动实现的的redux-thunk在判断action是个函数后，就调用函数，然后把stroe上的action设置成一个空的object，防止后续中间件出错。

### redux-thunk的实现 ###

原理很简单，判断action是不是function，是的话就dispatch方法传给这个function，然后把action设置成一个空的\{\}，不是的话就不做任何处理。

转载于:https://juejin.im/post/5ce8bf65e51d4577407b1ca1