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
    
    const dispatch = (action) => {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }
    
    const subscribe = (listener) => listeners.push(listener)
    
    // 这里初始化dispatch的原因是在这之前,state是为null的
    //所以我需要传一个不存在的action去reducer里面,拿到最默认的那个defaultState
    //这个defaultState写在reducer的那个文件里面
    dispatch({});
    return {
        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(虽然我觉得可能没有必要)

Redux的createStore实现

Redux的createStore实现

猜你喜欢