Redux新手求助：解决action报错及顺序触发两个action的方法

嘿，作为Redux新手碰到这个报错真的太常见了！先给你拆解一下问题，再一步步教你解决：

错误原因 #

Redux默认只接受纯对象类型的Action，如果你的Action Creator返回的不是纯对象（比如一个函数），就会抛出这个错误。你想要按顺序触发两个Action，直接在普通函数里连续dispatch的话，要么是在Action Creator里这么做（返回了函数），要么没用到处理这类场景的中间件，所以Redux识别不了。

解决方案：使用Redux-Thunk中间件 #

Redux-Thunk是Redux官方推荐的中间件，专门用来处理需要异步操作或者连续dispatch多个Action的场景，它允许Action Creator返回一个函数，而不是必须是纯对象。

步骤1：安装Redux-Thunk #

首先在项目里安装依赖：

npm install redux-thunk
# 或者用yarn
yarn add redux-thunk

步骤2：配置Store时应用中间件 #

如果是传统Redux（不用Redux Toolkit）

在创建Store的文件里，引入并应用Thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducer'; // 你的根reducer

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 加入Thunk中间件
);

export default store;

如果用Redux Toolkit（推荐，更简洁）

Redux Toolkit的configureStore已经默认集成了Thunk，所以你不需要额外配置，直接创建Store就行：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducer';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

步骤3：编写顺序触发Action的Creator #

在你的action.js里，新增一个专门用来按顺序触发两个Action的Creator，注意先修正你原来的拼写错误（actioneTwo多了个e，改成actionTwo）：

export const actionOne = (value) => ({ type: Explore.ACTION_ONE, payload: { value }, });
// 修正拼写错误
export const actionTwo = payload => ({ type: Explore.ACTION_TWO, payload, });

// 新增：按顺序触发两个Action的Creator
export const triggerActionsInOrder = (firstValue, secondPayload) => {
  // 返回一个函数，参数是dispatch（Thunk会自动传入）
  return (dispatch) => {
    // 先触发actionOne
    dispatch(actionOne(firstValue));
    // 再触发actionTwo
    dispatch(actionTwo(secondPayload));
  };
};

步骤4：在组件中使用 #

现在你可以在组件里直接dispatch这个新的Action Creator了：

import { useDispatch } from 'react-redux';
import { triggerActionsInOrder } from './action';

function YourComponent() {
  const dispatch = useDispatch();

  const handleSomeEvent = () => {
    // 传入需要的参数，按顺序触发两个Action
    dispatch(triggerActionsInOrder('你的第一个值', { key: '第二个Action的Payload' }));
  };

  return (
    <button onClick={handleSomeEvent}>触发顺序Action</button>
  );
}

额外说明 #

如果之后你需要处理异步逻辑（比如先调用API，拿到数据后再dispatch Action），Thunk也能轻松搞定，比如：

export const fetchDataAndDispatch = () => {
  return async (dispatch) => {
    // 先发起异步请求
    const data = await fetch('/api/data').then(res => res.json());
    // 请求成功后dispatch Action
    dispatch(actionOne(data));
    dispatch(actionTwo({ status: 'success' }));
  };
};

内容的提问来源于stack exchange，提问作者ksernow