Redux中异步action怎么写才不会报错？

Air-艳珂提问于 2026-03-06 11:49:20 阅读 3

框架

我最近在用Redux做登录功能，想在dispatch里发请求，但一调用就报错说“Actions must be plain objects”。我查了文档说要用中间件，但我已经装了redux-thunk，也按教程配置了，还是不行。

这是我的action代码：

export const login = (credentials) => {
  return async (dispatch) => {
    dispatch({ type: 'LOGIN_REQUEST' });
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
    dispatch({ type: 'LOGIN_SUCCESS', payload: res.data });
  };
};

store配置里也加了applyMiddleware(thunk)，但一触发这个action就崩溃，到底哪里漏了？

我来解答赞 1 收藏

反馈

1 条解答

郭云的笔记 Lv1

啊，这种报错我见过太多次了。你的thunk写法基本是对的，但有几个细节可能漏了：

1. 确认store配置正确：

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';



const store = createStore(

  rootReducer,

  applyMiddleware(thunk) // 这里必须传进去

);

2. 你的action代码有个小问题，fetch返回的res.data是undefined，应该先解析json：
建议改成这样：

export const login = (credentials) => {

  return async (dispatch) => {

    dispatch({ type: 'LOGIN_REQUEST' });

    try {

      const res = await fetch('/api/login', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify(credentials)

      });

      const data = await res.json(); // 加上这行

      dispatch({ type: 'LOGIN_SUCCESS', payload: data });

    } catch (err) {

      dispatch({ type: 'LOGIN_FAILURE', error: err.message });

    }

  };

};

我顺手加了错误处理和headers，这样更健壮。常见问题就是漏了res.json()或者store没正确配置中间件。

2026-03-06 12:15