Redux 中遇到的 “Action type 未定义” 的问题及解决方案

在 Redux 中，Action 是一个普通的 JavaScript 对象，用来描述应用中的事件。Action Type 是一个字符串常量，用来描述 Action 的类型。在 Redux 应用中，我们需要在 Reducer 中根据 Action Type 来处理对应的事件。然而，有时候我们会遇到一个常见的问题：Action Type 未定义。本文将介绍这个问题的原因和解决方案。

问题描述

当我们在 Redux 应用中定义了一个 Action Type，但在 Reducer 中使用时却提示该 Action Type 未定义，如下所示：

// 定义 Action Type
export const ADD_TODO = 'ADD_TODO';

// Reducer 中使用
const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

在上述代码中，我们定义了一个 ADD_TODO 的 Action Type，并在 Reducer 中使用。但是，当我们运行应用时，却发现控制台报错，提示 ADD_TODO 未定义。

问题原因

造成这个问题的原因是我们在定义 Action Type 的时候，没有将其导入到 Reducer 中。在上面的示例代码中，我们定义了 ADD_TODO 的 Action Type，但是在 Reducer 中并没有导入该常量。因此，在 Reducer 中使用 ADD_TODO 时，就会提示该常量未定义。

解决方案

要解决这个问题，我们需要将定义的 Action Type 导入到 Reducer 中。在上述示例代码中，我们可以通过以下方式解决：

// 定义 Action Type
export const ADD_TODO = 'ADD_TODO';

// Reducer 中导入
import { ADD_TODO } from '../actions';

const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

在上述代码中，我们将 ADD_TODO 导入到了 Reducer 中，这样就可以在 Reducer 中使用该常量了。

另外，我们还可以通过使用常量来避免 Action Type 未定义的问题。例如，我们可以在定义 Action Type 的时候，同时定义对应的常量，如下所示：

// 定义 Action Type 和常量
export const ADD_TODO = 'ADD_TODO';
export const ADD_TODO_SUCCESS = 'ADD_TODO_SUCCESS';

// Reducer 中使用常量
import { ADD_TODO } from '../actions';

const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
    case ADD_TODO_SUCCESS:
      return [...state, action.payload];
    default:
      return state;
  }
};

在上述代码中，我们定义了 ADD_TODO 和 ADD_TODO_SUCCESS 两个 Action Type，并将 ADD_TODO 导入到 Reducer 中。在 Reducer 中，我们使用了 ADD_TODO 和 ADD_TODO_SUCCESS 两个常量来处理对应的事件。这样，即使我们在 Reducer 中使用了未定义的 Action Type，也不会报错了。

总结

在 Redux 应用中，我们需要定义 Action Type 来描述应用中的事件，并在 Reducer 中根据 Action Type 来处理对应的事件。当我们在 Reducer 中使用未定义的 Action Type 时，就会提示该常量未定义的错误。要解决这个问题，我们需要将定义的 Action Type 导入到 Reducer 中，或者使用常量来避免这个问题的发生。希望本文能够帮助你解决遇到的问题，并对 Redux 的使用有所帮助。

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