Redux 入门教程：Redux 是如何工作的？-JavaScript中文网-JavaScript教程资源分享门户

什么是 Redux？

Redux 是一个 JavaScript 应用程序状态管理的库。它是建立在 React 应用的基础上的，但它也可以用于其他的 JavaScript 应用程序。

Redux 的目标是让应用程序的状态变得可预测且易于管理。它将应用程序的状态存储在一个单一的对象中，这个对象被称为 Redux Store。当应用程序的状态发生变化，Redux 会自动更新这个状态，并通知 React 组件来更新视图。

Redux 的核心理念

Redux 的核心理念就是：单一职责原则。它将应用程序的状态分离成单独的 Redux Store。这个状态可以作为全局的数据源来处理应用程序的所有状态变化。

Redux Store 是一个只读的状态对象。只能通过 Redux 提供的纯函数（reducer）来修改状态。这些函数被称为 Reducer 函数，它们负责处理应用程序的状态变化。它们不会直接修改状态，而是返回一个新的状态对象，这个对象将成为 Redux Store 的新状态。

Redux 还有一个重要的概念：Action。Action 是一个纯 JavaScript 对象，用于描述应用程序需要执行的操作。Action 通常包含一个 type 属性和一个 payload 属性。它们告诉 Redux Store 需要进行什么操作。

Redux 的工作流程

Redux 的工作流程可以分为三个步骤：

定义一个 Redux Store：Store 是应用程序的状态存储，我们可以通过 createStore 方法定义一个 Store。

// www.javascriptcn.com code example
import { createStore } from 'redux';

const initialState = {
  counter: 0
};

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

const store = createStore(reducer);

定义一个 Action：Action 是描述应用程序需要执行的操作的一个对象。我们可以通过定义一个静态的 Action 类型和一个 Action 函数来定义一个 Action。

// www.javascriptcn.com code example
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

function incrementCounter() {
  return {
    type: INCREMENT_COUNTER
  };
}

function decrementCounter() {
  return {
    type: DECREMENT_COUNTER
  };
}

连接 React 组件和 Redux Store：我们可以使用 React 的 connect 方法来连接 React 组件和 Redux Store。通过这种方式，React 组件可以访问 Redux Store 中的状态，并将其呈现在视图上。

// www.javascriptcn.com code example
import { connect } from 'react-redux';

function Counter({ counter, incrementCounter, decrementCounter }) {
  return (
    <div>
      <button onClick={incrementCounter}>+</button>
      <span>{counter}</span>
      <button onClick={decrementCounter}>-</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  counter: state.counter
});

const mapDispatchToProps = {
  incrementCounter,
  decrementCounter
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

结语

Redux 是一个非常灵活且强大的 JavaScript 应用程序状态管理工具。运用它可以更好地管理和控制应用程序的状态，以及提高 Web 应用程序的可维护性和可扩展性。

希望今天的入门教程能帮助你更好地理解 Redux 工作原理，让你更好地运用 Redux 来构建你的下一个 JavaScript 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d79ca9a941bf7134da148b

Redux 入门教程：Redux 是如何工作的？

什么是 Redux？

Redux 的核心理念

Redux 的工作流程

结语

接着读