Действия должны быть простыми объектами. Используйте собственное промежуточное ПО для асинхронных действий

Я уже некоторое время ломаю голову над этим. Я устанавливаю redux-thunk, чтобы я мог выполнять вызовы API, но я продолжаю получать

Действия должны быть простыми объектами. Используйте специальное ПО промежуточного слоя для асинхронных действий.

на моих триггерах события onClick. Извините, если это дубликат, но я не смог найти ничего, что могло бы решить проблему. Насколько я могу судить, я правильно создаю действие. Любая помощь очень ценится.

store.js

import { applyMiddleware, createStore, compose } from 'redux'
import { syncHistoryWithStore } from 'react-router-redux'
import { browserHistory } from 'react-router'
import logger from "redux-logger"
import thunk from "redux-thunk"

// import the root reducer
import rootReducer from './reducers/index'

import paperData from './data/paperData'
import articleData from './data/articleData'

// create an object for the default data
const defaultState = { paperData, articleData };

// enable Redux Dev Tools
const enhancers = compose(
  window.devToolsExtension
    ? window.devToolsExtension()
    : f => f
);

const middleware = applyMiddleware(
                    logger(),
                    thunk);

const store = createStore(rootReducer,
                          defaultState,
                          enhancers,
                          middleware);

export const history = syncHistoryWithStore(browserHistory, store);

// hot reloading the reducer
if (module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer)
  })
}

export default store

index.js

import React from 'react'
import { render } from 'react-dom'
import Homepage from './containers/homepage';
import ArticleList from './containers/article-list';

// import css

// import components
import App from './components/App'

// import react router
import { Router, Route, IndexRoute } from 'react-router'

import { Provider } from 'react-redux'

import store, { history } from './store'

const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Homepage} />
        <Route path="paperlist/:word" component={ArticleList} />
      </Route>
    </Router>
  </Provider>
);

render(router, document.getElementById('root'));

App.js

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as actionCreators from '../actions/actionCreators';
import Main from '../containers/main';


function mapStateToProps(state) {
  return {
    paperData: state.paperData,
    articleData: state.articles
  }
}

function mapDispachToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

const App = connect(mapStateToProps, mapDispachToProps)(Main);

export default App;

Вот как я вызываю событие onClick на моей домашней странице

import React, {Component} from 'react';
import '../../styles/homepage.sass'
import WordCloud from './word-cloud';

const homepage = React.createClass ({
  handleSubmit(e) {
    e.preventDefault();
    const searchQuery = this.refs.query.value;
    console.log(this.refs.query.value);
    this.props.generatePapers(searchQuery);
  },
  render() {
    let query = this.props.query;
    return (
      <div className="input-group center">
        <WordCloud {...this.props} />
        <input id="search-input-box" type="text" className="form-control searchBox"
               placeholder="Search artists..." ref="query"
        >
        </input>

        <button id="search-button" className="btn btn-lg searchButton"
                onClick={this.handleSubmit}>
              <span className="glyphicon glyphicon-search" aria-hidden="true">
              </span> Search
        </button>
      </div>
    );
  }
});

export default homepage;

actionCreators.js

import axios from "axios";

export const generatePapers = (query) => {
  const request = axios.get("http://localhost:8888/generateWordcloud/" + query);
  return (dispatch) => {
    request.then(({data}) => {
      dispatch({
        type: "GENERATE_WORDCLOUD",
        payload: data
      })
    })
  };
};

reactjs react-redux redux-thunk
person ntr    schedule 08.04.2017    source источник
comment
можете ли вы подтвердить, что вы действительно делаете запрос POST в generatePapers   -  person KornholioBeavis    schedule 09.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы не правильно создаете свой магазин. Из документов редукса:

createStore (редуктор, [preloadedState], [усилитель])

createStore принимает 3 аргумента: корневой редуктор, необязательно предварительно загруженное состояние по умолчанию и энхансеры.

Вы передаете редукционный преобразователь как неизвестный 4-й аргумент. Ваш код должен больше походить на:

const store = createStore(reducer, composeWithDevTools(
    applyMiddleware(...middleware),
  // other store enhancers if any
));
person Yuval    schedule 08.04.2017
comment
Рад помочь. Если этот ответ был полезен для вас, отметьте его как правильный с помощью зеленой буквы «V», чтобы другие могли извлечь из этого пользу и рассчитывать на него. - person Yuval; 10.04.2017