React教程之Redux中Store的实现

杨新朋| 阅读:101 发表时间:2017-10-17 20:18:02 前端技术

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。

上一节介绍了 Redux 涉及的基本概念,可以发现 Store 提供了三个方法:store.getState()、store.dispatch()、store.subscribe()。

import { createStore } from 'redux';
let { subscribe, dispatch, getState } = createStore(reducer);

上面的这段代码就是使用createStore创建一个Store对象,这个对象包含了三个方法。

另外,createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。

let store = createStore(todoApp, window.STATE_FROM_SERVER)

上面代码中,window.STATE_FROM_SERVER就是整个应用的状态初始值。注意,如果提供了这个参数,它会覆盖 Reducer 函数的默认初始值。

下面是createStore方法的一个简单实现,可以了解一下 Store 是怎么生成的。

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};
本文由杨新朋发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。