Redux-Thunk: действия должны быть простыми объектами - PullRequest
Новая
       5

Redux-Thunk: действия должны быть простыми объектами

1 голос
/ 29 февраля 2020

Redux Thunk не работает для меня, не уверен, почему нет. Раньше все работало. Сейчас я пытаюсь заставить работать избыточный поток, но он просто дает мне

Действия должны быть простыми объектами

Мой код довольно стандартный, я думаю:

createStore 

import { createStore as reduxCreateStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';

import reduxThunk from 'redux-thunk';

const createStore = () =>
  reduxCreateStore(reducers, {}, applyMiddleware(reduxThunk));
export default createStore;

Поместить хранилище в поставщика 

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}

Вызов действия из компонента React 

import React, { Component } from "react";
import m from "mousetrap";
import { connect } from "react-redux";
import * as actions from "./src/actions";

class Mousetrap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { //binding the action to mousetrap hotkeys here
    m.bind(["space"], () => this.props.nextDiv());
  }
  //...
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
  };
}

export default connect(mapStateToProps, actions)(Mousetrap);

Создатель действий: 

export const nextDiv = () => {
   return (dispatch, getState) => {
     dispatch({ type: NEXT_DIV });
  };
};

Из того, что я нашел в Интернете до сих пор, похоже, что большинство людей получают эту ошибку, когда есть что-то не так в их создателе действий, т.е. когда они не возвращают функцию et c. - но я делаю это правильно, я полагаю?

Я думаю, может быть, что-то пошло не так на этом этапе: 

import * as actions from "./src/actions";
//...
export default connect(mapStateToProps, actions)(Mousetrap);

Может быть, я не могу импортировать создателей Thunk Action, как это? Или, может быть, мое связывающее действие как-то сейчас не работает с redux-thunk? Извините за вопрос, я чувствую, что это, вероятно, что-то тривиальное! Заранее большое спасибо!

1 Ответ

2 голосов
/ 29 февраля 2020

Вы не используете свой метод createStore, скорее, снова импортируете его из резервной копии. Таким образом, промежуточное программное обеспечение не добавляется. 

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux"; <--
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}
...