24行JavaScript代码实现Redux的方法实例

前言

Redux是迄今为止创建的最重要的JavaScript库之一，灵感来源于以前的艺术比如Flux和Elm，Redux通过引入一个包含三个简单要点的可伸缩体系结构，使得JavaScript函数式编程成为可能。如果你是初次接触Redux，可以考虑先阅读官方文档。

1. Redux大多是规约

考虑如下这个使用了Redux架构的简单的计数器应用。如果你想跳过的话可以直接查看Github Repo。

1.1 State存储在一棵树中

该应用程序的状态看起来如下：

const initialState = { count: 0 };

1.2 Action声明状态更改

根据Redux规约，我们不直接修改(突变)状态。

// 在Redux应用中不要做如下操作state.count = 1;

相反，我们创建在应用中用户可能用到的所有行为。

const actions = { increment: { type: 'INCREMENT' }, decrement: { type: 'DECREMENT' }};

1.3 Reducer解释行为并更新状态

在最后一个架构部分我们叫做Reduer，其作为一个纯函数，它基于以前的状态和行为返回状态的新副本。

const countReducer = (state = initialState, action) => { switch (action.type) { case actions.increment.type:  return {  count: state.count + 1  }; case actions.decrement.type:  return {  count: state.count - 1  }; default:  return state; }};

1.4 目前为止还没有Redux

你注意到了吗？到目前为止我们甚至还没有接触到Redux库，我们仅仅只是创建了一些对象和函数，这就是为什么我称其为"大多是规约"，90%的Redux应用其实并不需要Redux。

2. 开始实现Redux

要使用这种架构，我们必须要将它放入到一个store当中，我们将仅仅实现一个函数：createStore。使用方式如下：

import { createStore } from 'redux'const store = createStore(countReducer);store.subscribe(() => { console.log(store.getState());});store.dispatch(actions.increment);// logs { count: 1 }store.dispatch(actions.increment);// logs { count: 2 }store.dispatch(actions.decrement);// logs { count: 1 }

下面这是我们的初始化样板代码，我们需要一个监听器列表listeners和reducer提供的初始化状态。

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {});}

无论何时某人订阅了我们的store，那么他将会被添加到listeners数组中。这是非常重要的，因为每次当某人在派发(dispatch)一个动作(action)的时候，所有的listeners都需要在此次事件循环中被通知到。调用yourReducer函数并传入一个undefined和一个空对象将会返回一个initialState，这个值也就是我们在调用store.getState()时的返回值。既然说到这里了，我们就来创建这个方法。