reactjs - Redux/ React Error: Actions must be plain objects. Use custom middleware for async actions

Question

I create store as below:

import { createStore, applyMiddleware } from 'redux';
import { logger } from 'redux-logger';
import rootReducer from './reducers/rootReducer';
import { compose } from 'redux';

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




const store = createStore(
  rootReducer,
  InitialState,
  applyMiddleware(logger),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store;

And this is my userActions file:

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
    })

  }

This is my userReducer as below:

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,
        items: action.payload
      }
    }
    default: {
      return state
    }
  }
}

This is my React component, where I using my Redux action:

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.dispatch(addText());


  }

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

Apacze.PropTypes = {
  dispatch: PropTypes.func.isRequired,

  texts: PropTypes.array.isRequired
}

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

export default connect(mapStateToProps ) (Apacze);

I tried almost everything including with similar solving questions from stackoverflow. Unfortunately none of similar solving questions don't work in my case.

标签： reactjsreact-reduxjsxreact-proptypes

Answer 1

您的 addtext 操作不是普通对象，如果 obj 是 const 您可以将其停止操作

import { ADD_TEXT } from './types';
const obj = [
      {
        id: 0,
        type: 'Apacze',
        text: 'przykaldowyTeksciorNa start'
      },
      {
        id: 1,
        type: 'Apacze',
        text: 'przykladowyTekst2'
      }
]

export const addText = () => ({
      type: ADD_TEXT, 
      payload: obj
})

否则你可以使用 redux thunk 作为中间件

import thunk from 'redux-thunk';

const store = createStore(
  rootReducer,
  InitialState,
  applyMiddleware(thunk, logger),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)