Redux 中常量的用途是什么？

在 Redux 中，常量被广泛用于定义和表示 action 的类型。它们通常定义在单独的模块中，并通过导出来使用。在使用 action 的时候，我们可以引用相关的常量，这样可以确保我们的代码在编写和阅读时更加清晰和易懂。

如何使用常量

我们可以按照以下方式定义一个常量模块：

// actionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

在其他文件中，我们可以通过引入这些常量来定义相关的 action：

import { ADD_TODO } from './actionTypes';

const addTodo = content => {
  return {
    type: ADD_TODO,
    payload: {
      content
    }
  }
};

这样做的好处在于，阅读和调试代码时，我们很容易知道 action 具体类型的定义和作用，以及这个 action 应该对应哪个 reducer。

常量和拼写错误

假设我们没有使用常量，而是在多个地方直接使用字符串来表示 action 类型：

const ADD_TODO = 'add_todo';
const COMPLETE_TODO = 'complete_todo';
const SET_VISIBILITY_FILTER = 'set_visibility_filter';

在定义 action 和 reducer 的时候，我们可能会做如下的错误：

// actionCreators.js

const addTodo = content => {
  return {
    type: ADD_TODO,
    payload: {
      content
    }
  }
};

// reducer.js

import { addTodo } from './actionCreators';

const todoApp = (state = initialState, action) => {
  switch (action.type) {
    case addTodo.type: // 错误的写法，应该是 ADD_TODO
      return {
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
};

这种情况下，当我们拼写 action 的类型错误的时候，很难发现问题，因为没有类型检查器告诉我们错误发生在哪里。相反，如果使用常量，则错误发生的位置会更容易被发现：

// actionCreators.js

const addTodo = content => {
  return {
    type: ADD_TODO,
    payload: {
      content
    }
  }
};

// reducer.js

import { ADD_TODO } from './actionTypes';
import { addTodo } from './actionCreators';

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

总结

常量在 Redux 中有非常重要的作用。它们可以帮助我们定义和表示 action 的类型，同时提高代码的可读性和可维护性。在实际开发中，我们应该将常量定义在单独的模块中，并在需要使用的地方进行引入。