乐趣区

如何使用24行JavaScript代码实现Redux

jiezi

作者：Yazeed Bzadough
译者：小维 FE
原文：freecodecamp

为了保证文章的可读性，本文采用意译而非直译。

90% 的规约，10% 的库。
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，其作为一个纯函数，它基于以前的状态和行为返回状态的新副本。

  • 如果 increment 被触发，则增加state.count
  • 如果 decrement 被触发，则减少state.count 
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() 时的返回值。既然说到这里了，我们就来创建这个方法。

2.1 store.getState()

这个函数用于从 store 中返回最新的状态，当用户每次点击一个按钮的时候我们都需要最新的状态来更新我们的视图。

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

2.2 store.dispatch()

这个函数使用一个 action 作为其入参，并且将这个 action 和currentState反馈给 yourReducer 来获取一个新的状态，并且 dispatch 方法还会通知到每一个订阅了当前 store 的监听者。

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

  return {getState: () => currentState,
    dispatch: (action) => {currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {listener();
      });
    }
  };
};

2.3 store.subscribe(listener)

这个方法使得你在当 store 接收到一个 action 的时候能够被通知到，可以在这里调用 store.getState() 来获取最新的状态并更新 UI。

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

  return {getState: () => currentState,
    dispatch: (action) => {currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {listener();
      });
    },
    subscribe: (newListener) => {listeners.push(newListener);

      const unsubscribe = () => {listeners = listeners.filter((l) => l !== newListener);
      };

      return unsubscribe;
    }
  };
};

同时 subscribe 函数返回了另一个函数unsubscribe，这个函数允许你当不再对 store 的更新感兴趣的时候能够取消订阅。

3. 整理代码

现在我们添加按钮的逻辑，来看看最后的源代码：

// 简化版 createStore 函数
const createStore = (yourReducer) => {let listeners = [];
  let currentState = yourReducer(undefined, {});

  return {getState: () => currentState,
    dispatch: (action) => {currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {listener();
      });
    },
    subscribe: (newListener) => {listeners.push(newListener);

      const unsubscribe = () => {listeners = listeners.filter((l) => l !== newListener);
      };

      return unsubscribe;
    }
  };
};

// Redux 的架构组成部分
const initialState = {count: 0};

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

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;
  }
};

const store = createStore(countReducer);

// DOM 元素
const incrementButton = document.querySelector('.increment');
const decrementButton = document.querySelector('.decrement');

// 给按钮添加点击事件
incrementButton.addEventListener('click', () => {store.dispatch(actions.increment);
});

decrementButton.addEventListener('click', () => {store.dispatch(actions.decrement);
});

// 初始化 UI 视图
const counterDisplay = document.querySelector('h1');
counterDisplay.innerHTML = parseInt(initialState.count);

// 派发动作的时候跟新 UI
store.subscribe(() => {const state = store.getState();

  counterDisplay.innerHTML = parseInt(state.count);
});

我们再次看看最后的视图效果：

4. 交流

本篇主要简单了解下 Redux 的三个架构组成部分以及如何实现一个简化版的 Redux，对 Redux 能有进一步的了解，希望能和大家相互讨论技术，一起交流学习。

文章已同步更新至 Github 博客，若觉文章尚可，欢迎前往 star！

你的一个点赞，值得让我付出更多的努力！

逆境中成长，只有不断地学习，才能成为更好的自己，与君共勉！

退出移动版