Redux的createStore实现

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Redux的createStore实现

JobsOfferings   2020-03-22 我要评论
## Redux的createStore实现   使用过react的同学应该对Redux这个东西有所了解。他是一种**全局状态管理**的思想(对, 这里我觉得它是一种思想, 因为对于React来说, 其实Redux内部并没有什么需要与React兼容的东西, react-redux 库里才有), 它信奉的是: + 唯一数据仓库 + 只能读取 + 数据改变只能通过纯函数进行   这其实对我们是一种约束, 毕竟我们就算引入了Redux, 也能使用`this.props`去进行父子组件数据传输, 但是当你需要非父子组件的通信的时候, 里面的数据流动会非常难以捉摸, 所以我们使用Redux。 在React中集成Redux时, 在程序的入口处,我们可以看到这样的一段代码 ```js // 这里的todoApp是一个Reducer函数,接受的是state和actions const store = createStore(todoApp) ```   在我们的react使用单一仓库的时候,能看到一下的一些类似的代码,从中我们能看到,我们本组件的`state`是通过`this.state = store.getState()`所创建的, 那么我们的`store`是一个对象,里面有一个`getState`函数能够返回内部的`state`,同时这个`state`是需要持久保存的,所以我们大概能有一些思路。 ```js 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 (
) } storeChange() { this.setState(store.getState()) } } export default Page ```   接下来我将自己写的`createStore`函数贴出来, 然后讲解。这个函数实现了大部分功能,但是对于中间件的处理这里并没有能够实现,后面我应该会对其有一些补充。 ```js 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(虽然我觉得可能没有必要)

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们