Question

我创建商店如下：

＆＃13;

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;

＆＃13;

这是我的userActions文件：

＆＃13;

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

＆＃13;

这是我的userReducer，如下所示：

＆＃13;

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

＆＃13;

这是我的React组件，我使用我的Redux操作：

＆＃13;

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

＆＃13;

我尝试了几乎所有内容，包括来自stackoverflow的类似解决问题。不幸的是，在我的案例中，没有一个类似的解决问题不起作用。

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__()
)

Redux / React错误：操作必须是普通对象。使用自定义中间件进行异步操作

1 个答案: