React-Redux 中的 Action Creator 和 reducer

React-Redux 是一种流行的前端框架，它提供了一种优雅的方式来管理组件状态。在 React-Redux 中，Action Creator 和 reducer 是两个重要的概念。本文将详细介绍 Action Creator 和 reducer 的概念、用法和实例，以及它们在 React-Redux 中的作用。

什么是 Action Creator？

Action Creator 是一个函数，它返回一个包含 type 属性和其他可选数据的对象。这个对象描述了一个应用程序中的事件，通常称为“action”。例如，下面是一个简单的 Action Creator：

function increment() {
  return { type: 'INCREMENT' };
}

在这个例子中，increment 函数返回一个包含 type 属性的对象。这个对象描述了一个事件，即“INCREMENT”。

Action Creator 的作用是创建一个描述应用程序事件的对象。这些事件可以被传递给 reducer，从而更新应用程序的状态。

什么是 reducer？

reducer 是一个函数，它接收两个参数：当前状态和一个 action 对象。reducer 根据 action 对象的 type 属性来更新应用程序的状态。例如，下面是一个简单的 reducer：

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

在这个例子中，counter 函数接收一个当前状态和一个 action 对象。如果 action 对象的 type 属性是“INCREMENT”，则返回当前状态加 1；如果 type 属性是“DECREMENT”，则返回当前状态减 1；否则返回当前状态。

reducer 的作用是更新应用程序的状态。它接收一个 action 对象，根据这个对象的 type 属性来更新应用程序的状态。

如何使用 Action Creator 和 reducer？

在 React-Redux 中，Action Creator 和 reducer 是一起使用的。当组件需要更新应用程序的状态时，它会调用一个 Action Creator，该 Action Creator 返回一个 action 对象。然后，这个 action 对象将被传递给 reducer，reducer 根据这个对象的 type 属性来更新应用程序的状态。

例如，下面是一个简单的 React-Redux 组件，它使用 Action Creator 和 reducer 来更新计数器的状态：

import React from 'react';
import { connect } from 'react-redux';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

function mapStateToProps(state) {
  return { count: state };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  };
}

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

在这个例子中，Counter 组件使用 connect 函数来连接到 Redux store。mapStateToProps 函数将当前状态映射到组件的 props，而 mapDispatchToProps 函数将 Action Creator 映射到组件的 props。

当用户点击“+”按钮时，increment 函数将被调用。increment 函数返回一个 action 对象，该对象的 type 属性是“INCREMENT”。然后，这个 action 对象将被传递给 reducer，reducer 根据这个对象的 type 属性来更新应用程序的状态。同样，当用户点击“-”按钮时，decrement 函数将被调用。

总结

Action Creator 和 reducer 是 React-Redux 中的两个重要概念。Action Creator 用于创建描述应用程序事件的对象，而 reducer 用于更新应用程序的状态。当组件需要更新应用程序的状态时，它会调用一个 Action Creator，该 Action Creator 返回一个 action 对象。然后，这个 action 对象将被传递给 reducer，reducer 根据这个对象的 type 属性来更新应用程序的状态。在 React-Redux 中，Action Creator 和 reducer 是一起使用的，它们提供了一种优雅的方式来管理组件状态。

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