React-Redux 中的 Action-Type 和 Action-Creator 的实现和区分

在 React-Redux 应用中，我们经常会用到 Action-Type 和 Action-Creator。它们是 Redux 中的两个核心概念，用于管理应用的状态和数据流动。在本文中，我们将详细讨论这两个概念的实现和区分，以及它们的作用和使用方法。

Action-Type

Action-Type 是 Redux 中的一个概念，用于描述一个操作的类型。它是一个字符串常量，用于唯一标识一个 Action。在 Redux 应用中，我们通常会把所有的 Action-Type 集中定义在一个文件中，以便于管理和维护。

下面是一个示例：

// actionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

在上面的代码中，我们定义了三个 Action-Type，分别是 ADD_TODO、TOGGLE_TODO 和 SET_VISIBILITY_FILTER。

Action-Creator

Action-Creator 是 Redux 中的另一个概念，用于创建一个 Action。它是一个函数，返回一个包含 type 和 payload 属性的对象。其中，type 属性指定了 Action 的类型，payload 属性指定了 Action 的数据。

下面是一个示例：

// actionCreators.js

import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from './actionTypes';

let nextTodoId = 0;

export const addTodo = text => ({
  type: ADD_TODO,
  id: nextTodoId++,
  text
});

export const toggleTodo = id => ({
  type: TOGGLE_TODO,
  id
});

export const setVisibilityFilter = filter => ({
  type: SET_VISIBILITY_FILTER,
  filter
});

在上面的代码中，我们定义了三个 Action-Creator，分别是 addTodo、toggleTodo 和 setVisibilityFilter。这些函数接受不同的参数，并返回不同的 Action 对象。

区分 Action-Type 和 Action-Creator

在 React-Redux 应用中，我们需要清楚地区分 Action-Type 和 Action-Creator。Action-Type 是一个字符串常量，用于唯一标识一个 Action，而 Action-Creator 是一个函数，用于创建一个 Action 对象。

在使用 Action-Type 和 Action-Creator 时，我们通常会遵循以下的规则：

• Action-Type 应该集中定义在一个文件中，以便于管理和维护；
• Action-Creator 应该根据不同的功能模块分别定义在不同的文件中，以便于组织和调用；
• 在组件中使用 Action-Creator 时，通常会通过 connect 函数将其与组件绑定，并以 props 的形式传递给组件；
• 在 Reducer 中处理 Action 时，通常会根据 Action-Type 的值来判断应该如何处理该 Action。

下面是一个示例：

// TodoList.js

import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from './actionCreators';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleInputChange = event => {
    this.setState({ inputValue: event.target.value });
  };

  handleAddTodo = () => {
    const { inputValue } = this.state;
    const { addTodo } = this.props;
    addTodo(inputValue);
    this.setState({ inputValue: '' });
  };

  render() {
    const { inputValue } = this.state;
    return (
      <div>
        <input value={inputValue} onChange={this.handleInputChange} />
        <button onClick={this.handleAddTodo}>Add Todo</button>
      </div>
    );
  }
}

const mapDispatchToProps = {
  addTodo
};

export default connect(null, mapDispatchToProps)(TodoList);

在上面的代码中，我们定义了一个 TodoList 组件，并使用 connect 函数将其与 Redux Store 绑定。在组件中，我们通过 props 的形式获取了 addTodo 函数，并在添加 Todo 时调用了该函数。

总结

在本文中，我们详细讨论了 React-Redux 中的 Action-Type 和 Action-Creator 的实现和区分。这两个概念是 Redux 中的核心概念，用于管理应用的状态和数据流动。我们需要清楚地区分这两个概念，并遵循一定的规则来使用它们。希望本文对你有所帮助，如果有任何问题或建议，请在评论区留言。

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