アクションはプレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用してください

Question

私は今この間に私の頭を叩いています。私はAP通信を行うことができるように還元型サンクをセットアップしますが、私は受け取り続けます

アクションはプレーンオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用します。

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

Answer 1

。 Reduxののドキュメントから：ルート低減、必要に応じてデフォルトプリロード状態、およびエンハンサー：

CREATESTORE（減速、[preloadedState]、[エンハンサー]）

CREATESTOREは3つの引数を受け付けます。

あなたは未知の第4引数としてredux-thunkを渡しています。あなたのコードでは、より多くのように好きでなければならない：

const store = createStore(reducer, composeWithDevTools(
    applyMiddleware(...middleware), 
    // other store enhancers if any 
));