Redux的createStore实现
JobsOfferings 人气:2
## 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(虽然我觉得可能没有必要)
加载全部内容