未知のエラー：アクションはプレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用します。私はどのように私の店で作成を使用する？

Question

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.....

コンポーネントをレンダリングするための私のindex.jsファイル。 Howiは私の店で作成を使用する？

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { Router, Route, browserHistory } from 'react-router' 
import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 
import AppContainer from './views/App/container' 
import './index.scss' 
import reducer from './store/reducers' 
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore) 
const store = createStoreWithMiddleware(reducer) 
ReactDOM.render(
    <Provider store={store}> 
     <Router history={ browserHistory }> 
     <Route path="/" component={ AppContainer }/> 
     </Router> 
    </Provider>, 
    document.getElementById('root') 
) 

リデューサーファイル：

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.....

import { combineReducers } from 'redux' 
import { routerReducer } from 'react-router-redux' 
import phoneVerify from './phoneverify' 
import auth from './auth' 
const rootReducer = combineReducers({ 
    routing: routerReducer, 
    isLogin: auth, 
    phoneVerify 
}) 
export default rootReducer 

アクションファイル：

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.....

import $ from 'jquery' 

import { phoneVerify } from '../actions/types' 

const verifyPhoneAsync = function (verification) { 
    return { 
    type: phoneVerify, 
    payload: verification 
    } 
} 
const verifyPhone = function (phone) { 
    $.ajax({ 
    url: 'api', 
    type: 'POST', 
    data: { mobile: phone }, 
    dataType: 'json', 
    success: (data) => { 
     console.log(data) 
    } 
    }) 
} 
const verifyOtp = function (phone, otp) { 
    return (dispatch) => { 
    $.ajax({ 
     url: 'api', 
     type: 'POST', 
     data: { mobile: phone, code: otp, devicetoken: 'nil', devicetype: 'nil' }, 
     dataType: 'json', 
     success: (data) => { 
     if (data.success === true) { 
      localStorage.setItem('MobileNumber', phone) 
      const varification = data 
      dispatch(verifyPhoneAsync(varification)) 
     } else { 
      console.log('rfg') 
      const varification = data 
      dispatch(verifyPhoneAsync(varification)) 
     } 
     } 
    }) 
    } 
} 
export { verifyPhone, verifyOtp } 

Answer 1

あなたはこのエラーを得たので、アクションverifyPhoneに返し忘れてしまいました。

Answer 2

あなたの店はredux-thunkミドルウェアで構成されていません。したがって、店舗は機能であるアクションをディスパッチする方法を知らない。

Middleware is not baked into createStore and is not a fundamental part of the Redux architecture

ミドルウェアを追加していないため、オブジェクトであるアクションのみをディスパッチできます。

まず、ストアエンハンサーが1つしかない場合はcomposeは必要ありません。

複数のストアエンハンサーを当社のストアに適用する場合に使用します。

applyMiddlewareはミドルウェアを当社のディスパッチチェーンに追加するためのストアエンハンサーです。 applyMiddlewareとだけ店のエンハンサーが再来

ストア増強剤に組み込まれて

注：店舗自体

ストアエンハンサーは、私たちに拡張された機能を持つ新しい店舗のクリエイターを与えるだけで高階関数です拡張します。

ミドルウェア：ミドルウェアは、新しいアクションがディスパッチされたときに、いくつかのカスタムロジックを実行する当社のReduxのストアに新しい発送方法を返す高階関数であるのに対しストア

の発送方法を拡張します。

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { Router, Route, browserHistory } from 'react-router' 
import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 
import AppContainer from './views/App/container' 
import './index.scss' 
import reducer from './store/reducers' 

let middleware = [ thunk ] 

const store = createStore(
    reducer, 
    applyMiddleware(...middleware) 
) 

ReactDOM.render(
    <Provider store={store}> 
     <Router history={ browserHistory }> 
     <Route path="/" component={ AppContainer }/> 
     </Router> 
    </Provider>, 
    document.getElementById('root') 
) 

は完全applyMiddleware APIのドキュメントを参照してください：だからあなたのコードは次のようになりますようにReduxの-サンク

import { createStore, applyMiddleware } from 'redux' 

let middleware = [ thunk ] // add additional middleware to this array 

const store = createStore(
    reducer, 
    preloadedState, 
    applyMiddleware(...middleware) 
) 

などのミドルウェアでReduxのストアを設定する方法