使用 Redux Actions 简化 action 和 reducer 的构建

Redux Actions 是一个用于简化 Redux 应用程序中 action 创建和处理的库。它提供了一种更简洁和直观的方式来定义 action 和 action creator。以下是 Redux Actions 的基本用法，包括一些示例代码。

安装

首先，你需要安装 redux-actions 库。你可以使用 npm 或者 yarn 来安装：

npm install redux-actions

或者

yarn add redux-actions

基本用法

定义 Action Types

在 Redux 中，action 是一个携带数据并发送到 store 中的对象，它的类型属性通常用于表示 action 的名称。首先，定义你的 action types：

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

使用 Redux Actions

Redux Actions 提供了 createAction 和 handleActions 等方法来简化 action 的创建和 reducer 的定义。

createAction

createAction 允许你创建一个 action creator，它接受一个或多个参数，并返回一个带有 type 属性的 action 对象。

import { createAction } from 'redux-actions';

const addTodo = createAction(ADD_TODO);
const toggleTodo = createAction(TOGGLE_TODO);

现在，你可以使用 addTodo 和 toggleTodo 来 dispatch actions：

dispatch(addTodo('Learn Redux Actions'));
dispatch(toggleTodo(1));

handleActions

handleActions 用于创建 reducer，它接受一个对象，对象的每个属性对应一个 action type，属性的值是一个处理函数，用于更新 state。

import { handleActions } from 'redux-actions';

const initialState = {
  todos: [],
  selectedTodo: null,
};

const todosReducer = handleActions({
  [ADD_TODO]: (state, action) => {
    const { payload } = action;
    return {
      ...state,
      todos: [...state.todos, payload],
    };
  },
  [TOGGLE_TODO]: (state, action) => {
    const { payload } = action;
    return {
      ...state,
      todos: state.todos.map(todo =>
        todo.id === payload ? { ...todo, completed: !todo.completed } : todo
      ),
    };
  },
}, initialState);

定义 Action with Payload

Redux Actions 允许你定义携带 payload 的 action。createAction 可以与辅助函数 actionType 一起使用，以创建更复杂的 action。

import { createAction, actionType } from 'redux-actions';

const { addTodo, toggleTodo } = actionType({
  ADD_TODO: undefined,
  TOGGLE_TODO: Number,
});

使用 Middleware

Redux Actions 可以与 middleware 如 redux-thunk 或 redux-saga 一起使用，以处理异步 action。

示例：异步 Action

以下是使用 redux-thunk 来处理异步 action 的示例：

import { createAction } from 'redux-actions';
import { call, put } from 'redux-saga/effects';

// 异步 action creator
const fetchTodos = createAction('FETCH_TODOS');
const fetchTodosSuccess = createAction('FETCH_TODOS_SUCCESS');
const fetchTodosFail = createAction('FETCH_TODOS_FAIL');

// Saga
function* fetchTodosSaga() {
  try {
    const response = yield call(fetch, '/api/todos');
    yield put(fetchTodosSuccess(response.todos));
  } catch (error) {
    yield put(fetchTodosFail(error));
  }
}

// Action dispatch in component
dispatch(fetchTodos());

结语

Redux Actions 提供了一种更简洁的方式来创建和管理 Redux 中的 actions 和 reducers。通过本文示例，你应该能够理解如何在 Redux 应用程序中使用 Redux Actions。 如需获取更多高级用法和最佳实践，请移步至官方网站。