Redux/React报错：Actions必须是纯对象，异步需用自定义中间件

这个错误的核心原因很明确：你使用了返回函数的action creator（也就是thunk风格的异步action），但Redux默认只接受普通对象作为action，必须通过redux-thunk中间件来支持这种函数式的action。结合你的代码，我整理了完整的修复步骤：

1. 安装并配置redux-thunk中间件 #

首先安装依赖：

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

然后修改你的store创建代码，正确引入并应用thunk，同时修复devtools扩展的组合方式（之前的写法会导致中间件被覆盖）：

import { createStore, applyMiddleware, compose } from 'redux';
import { logger } from 'redux-logger';
import thunk from 'redux-thunk'; // 引入thunk中间件
import rootReducer from './reducers/rootReducer';

const InitialState = { texts: [], item: {} };

// 正确组合中间件和Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  InitialState,
  composeEnhancers(applyMiddleware(thunk, logger)) // 先加载thunk，再加载logger
);

export default store;

2. 修复Action Creator的语法错误 #

你的addText函数缺少闭合的括号和大括号，导致代码不完整：

import { ADD_TEXT } from './types';

export const addText = () => (dispatch) => {
  const obj = [
    { id: 0, type: 'Apacze', text: 'przykaldowyTeksciorNa start' },
    { id: 1, type: 'Apacze', text: 'przykladowyTekst2' }
  ];
  dispatch({ type: ADD_TEXT, payload: obj });
}; // 补全闭合的括号和大括号

3. 修复Reducer的状态字段不一致问题 #

你的LISTED_USER case里错误地把item写成了items，和初始state的字段名不匹配：

import { ADD_TEXT, LISTED_USER } from '../actions/types';

const InitialState = { texts: [], item: {} };

export const userReducer = (state=InitialState, action) => {
  switch(action.type) {
    case ADD_TEXT: {
      return {
        ...state,
        texts: action.payload
      };
    }
    case LISTED_USER: {
      return {
        ...state,
        item: action.payload // 把items改为item，和初始state保持一致
      };
    }
    default: {
      return state;
    }
  }
}; // 补全闭合的大括号

4. 优化React组件的Redux连接方式 #

你可以直接把action映射到props，不用手动调用dispatch，同时修复PropTypes的拼写错误（应该是小写的propTypes）：

import React, { Component } from 'react';
import ApaczeView from '../view/ApaczeView';
import { addText } from '../redux/actions/userActions';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class Apacze extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Dokończ zaczętą historie, to od ciebie zależy jak potoczą się dalsze losy bohaterów.'
    };
    this.changeTekst = this.changeTekst.bind(this);
    this.addText = this.addText.bind(this);
  }

  changeTekst(e) {
    this.setState({
      [e.target.getAttribute('name')]: [e.target.innerHTML]
    });
  }

  addText(e) {
    this.props.addText(); // 直接调用props中的addText，无需手动dispatch
  }

  render() {
    return(
      <ApaczeView 
        text={this.state.text} 
        changeTekst={this.changeTekst} 
        addText={this.addText} 
      />
    );
  }
}

// 修复拼写错误：PropTypes → propTypes
Apacze.propTypes = {
  addText: PropTypes.func.isRequired,
  texts: PropTypes.array.isRequired
};

const mapStateToProps = (state) => ({
  texts: state.users.texts
});

// 直接将addText映射到props
export default connect(mapStateToProps, { addText })(Apacze);

关键错误总结 #

• 未配置redux-thunk中间件，导致Redux无法处理返回函数的action
• Store创建时未正确组合中间件和DevTools扩展
• Action Creator存在语法缺失问题
• Reducer中状态字段名不一致
• React组件中PropTypes拼写错误，且未规范映射action到props

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