Redux 简单实现-JavaScript中文网-JavaScript教程资源分享门户

近年来，前端技术飞速发展，前端框架层出不穷，Redux 作为其中的一员，已经成为了前端界广受欢迎的状态管理工具，但是 Redux 的核心原理仍然不为大多数开发者所理解。在本篇文章中，我们将带你了解 Redux 的原理及简单实现。

为何需要 Redux

在传统的前端开发中，数据状态通常被存储在组件的 state 属性内。由于 React 组件本身是可变的，为了与其他组件的状态同步，需要引入 props 进行数据的传递。这样的方法在一般的应用中已经足够，但如果应用较为庞大，状态管理变得十分复杂，甚至导致状态无法追踪和管理。此时就需要一种机制来统一管理应用的状态。

Redux 就是为解决这种问题而生的。它把所有的数据状态都存储在一个全局的 Store 中，通过派发 Action 来触发状态更新，再通过 Reducer 分发给各个子组件。

Redux 的核心原理

Redux 的核心原理可以从图中看出：

用户对页面进行操作，触发 Action；
Store 接收到 Action，再根据传入的 Reducer 进行数据处理，得到新的 State；
Store 将新的 State 提交给所有监听 Store 的组件进行更新；

基于这个原理，我们可以通过自行实现一个简易的 Redux。

首先，我们需要定义一个 Store 类。Store 主要包含 3 个关键的方法：subscribe、dispatch 和 getState。

class Store {
  constructor(reducer, initialState) {
    this.reducer = reducer;
    this.state = initialState;
    this.listeners = []; // 存储监听函数
  }

  subscribe(listener) {
    this.listeners.push(listener); // 监听函数推入数组
  }

  dispatch(action) {
    this.state = this.reducer(this.state, action); // 根据传入的 Action 生成新的 State
    this.listeners.forEach(listener => listener()); // 触发所有监听函数，更新组件
  }

  getState() {
    return this.state;
  }
}

接着，我们需要定义一个 Reducer。Reducer 是一个纯函数，接收两个参数，一个 State 和一个 Action，返回一个新的 State。Reducer 的作用是根据 Action 所带来的变化来更新 State。

function reducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

最后，我们需要在组件中使用 Store。首先，我们需要创建一个 Store 的实例。

const store = new Store(reducer, 0);

然后，我们就可以在组件中监听 Store 的更新，并订阅监听事件。

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: store.getState()
    };
  }

  componentDidMount() {
    store.subscribe(() => {
      this.setState({ count: store.getState() });
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>+</button>
        <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>-</button>
      </div>
    );
  }
}

在这个例子中，我们可以看到组件的状态是由 Store 来全局统一管理的。当组件初始化渲染时，它会给 Store 订阅一个监听函数，当 Store 的状态被更新时，这个监听函数就会被触发，以更新组件的状态。

总结

通过这篇文章的介绍，我们可以了解到 Redux 基础原理及简单实现，以及它能够带来的状态管理好处。当然，真正的 Redux 还包含了异步操作等更复杂的实现，我们在以后的学习当中会逐渐涉及。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ff44aeb4cecbf2d580b3b