Redux 的 createStore 实现

  使用过react的同学应该对Redux这个东西有所了解。他是一种「全局状态管理」的思想(对, 这里我觉得它是一种思想, 因为对于React来说, 其实Redux内部并没有什么需要与React兼容的东西, react-redux 库里才有), 它信奉的是:

• 唯一数据仓库
• 只能读取
• 数据改变只能通过纯函数进行

  这其实对我们是一种约束, 毕竟我们就算引入了Redux, 也能使用this.props去进行父子组件数据传输, 但是当你需要非父子组件的通信的时候, 里面的数据流动会非常难以捉摸, 所以我们使用Redux。

在React中集成Redux时, 在程序的入口处,我们可以看到这样的一段代码

// 这里的todoApp是一个Reducer函数,接受的是state和actions
const store = createStore(todoApp)

  在我们的react使用单一仓库的时候,能看到一下的一些类似的代码,从中我们能看到,我们本组件的state是通过this.state = store.getState()所创建的, 那么我们的store是一个对象,里面有一个getState函数能够返回内部的state,同时这个state是需要持久保存的,所以我们大概能有一些思路。

import React, { Component } from 'react'
import store from '../../store'
import { getIPData } from '../../store/actionCreators'

class Page extends Component {
    // 我的初始化的一个组件,已经能够使用Redux了
    constructor(props) {
        super(props);
        this.state = store.getState()
        store.subscribe(this.storeChange.bind(this));
    }

    componentWillMount() {
        // 获取IP数据,这里是作为一个dispatch的例子
        // 值得注意的是getIPData()返回的是一个带type字段的一个对象。
        const action = getIPData();
        store.dispatch(action);
    }

    render() {
        return (
            <div className="page">
            </div>
        )
    }

    storeChange() {
        this.setState(store.getState())
    }
}
export default Page

  接下来我将自己写的createStore函数贴出来, 然后讲解。这个函数实现了大部分功能,但是对于中间件的处理这里并没有能够实现,后面我应该会对其有一些补充。

export default function createStore(reducer){
    let state = null;
    const listeners = [];
    const getState = () => state
<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">const</span> dispatch = <span class="hljs-function" style="line-height: 26px;">(<span class="hljs-params" style="line-height: 26px;">action</span>) =&gt;</span> {
    state = reducer(state, action)
    listeners.forEach(<span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">listener</span> =&gt;</span> listener())
}

<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">const</span> subscribe = <span class="hljs-function" style="line-height: 26px;">(<span class="hljs-params" style="line-height: 26px;">listener</span>) =&gt;</span> listeners.push(listener)

<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 这里初始化dispatch的原因是在这之前,state是为null的</span>
<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//所以我需要传一个不存在的action去reducer里面,拿到最默认的那个defaultState</span>
<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//这个defaultState写在reducer的那个文件里面</span>
dispatch({});
<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span> {
    dispatch,
    subscribe,
    getState,
}

}

  所以刚才的分析, 我们需要创建一个函数对象createStore

  1、createStore里面用闭包的方法储存了一个state,我们程序用到的仓库就是这个、还储存有一个函数数组listeners,用于储存用户定义的函数(一般是用更新后的仓库重置this.state),因为我其实有多个页面都注册了一个订阅函数, 所以使用函数数组, 当需要分发时取出来取出来调用即可。

  2、createStore需要定义一个方法getState能够拿到state,这样就能够在React中使用this.state = store.getState()来初始化state并进行读取了

  3、createStore还需要定义一个方法dispatch, 因为redux不能直接修改state的值, 所以必须通过dispatch函数,传入action, 然后带着state直接传入reducer里, reducer会传回修改后的state。

  4、createStore再需要定义一个方法subscribe, 这是用来监听修改的函数, 在使用时, 绑定一个函数, 这个函数里会在外界获得state。所以这个函数应该接收一个函数, 然后push入一个队列里, 可是应该实时监听的, 为何要置入队列呢?这里我的理解是, 在一开始就将"外界重新获得state"这个函数置入队列, 类似Promise我承诺会使用这个函数。所以这个函数的使用应该放置在dispatch里面, 它传回一个state后, 做的事情是将所有队列中的"外界重新获得state"函数全部拿出来执行一遍。

  所以这个createStore函数的效果很明显了,getState用于获取当前state, subscribe用于给外界设置监听并将监听函数储存在createStore函数的属性中, 每次用户通过dispatch传action来修改state的时候, 将里面所有的监听函数拿出来执行一遍。而dispatch则是用来执行state修改的, 毕竟这个函数不允许使用setState这类的函数。

  这样, 我们就简单了解并分析了Redux的基本原理并对其进行了重写, 就像我提到的, Redux其实是一种约束的思想而出现, 这意味着在node中, 我们同样也能使用Redux(虽然我觉得可能没有必要)