2016-08-13 16 views
5

मैं redux-thunk का उपयोग एसिंक कार्यों और babel-polyfill के लिए वादे के लिए कर रहा हूं। मुझे निम्न त्रुटि मिलती है: Error: Actions must be plain objects. Use custom middleware for async actions.Redux-thunk async क्रियाएं: async क्रियाओं के लिए कस्टम मिडलवेयर का उपयोग करें

मैंने अपने मिडलवेयर में redux-promise सहित इस समस्या को हल किया। मुझे यकीन नहीं है कि मुझे इस समस्या को हल करने के लिए redux-promise का उपयोग क्यों करना पड़ा क्योंकि Redux दस्तावेज़ों में सभी उदाहरण babel-polyfill का उपयोग करते हैं। क्या मुझे redux-promise का उपयोग जारी रखना चाहिए या मुझे babel-polyfill के साथ कुछ समस्याएं हो सकती हैं?

babel-polyfill मेरे ऐप प्रवेश बिंदु में शामिल है:

import 'babel-polyfill'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 

import App from './components/App.jsx'; 
import store from './store.jsx'; 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider> 
    , document.querySelector('.container')); 

अद्यतन:

तो मैं सिर्फ मामले में जाँच की अगर मैं redux-thunk स्थापित किया है। यह मेरे पैकेज में है। जेसन।

fetchStates(sessionID) { 
    this.props.dispatch(fetchStates(sessionID)); 
} 
# I bind this function in component's constructor 
this.fetchStates = this.fetchStates.bind(this); 

और अंत में, यह:

function receiveStates(json) { 
    return { 
     type: RECEIVE_STATES, 
     states: json.states, 
    }; 
} 

export function fetchStates(uuid) { 
    return dispatch => 
     fetch(`https://my-api.com/session/${uuid}`) 
     .then(response => response.json()) 
     .then(json => dispatch(receiveStates(json))); 
} 

यहाँ कैसे मैं घटक से कार्रवाई कहते हैं: यहाँ मेरी store.js

import thunkMiddleware from 'redux-thunk'; 
import promise from 'redux-promise' 

export default store = createStore(
    rootReducer, 
    defaultState, 
    applyMiddleware(
    thunkMiddleware, 
    promise 
) 
); 

यहाँ action.js में मेरी async कार्रवाई कर रहा है मेरा reducer है:

function statesReducer(state = null, action) { 
    switch (action.type) { 
     case RECEIVE_STATES: 
      return { ...state, states: action.states }; 
     default: 
      return state; 
    } 
} 
+0

http://fiddle.jshell.net/josephj/e02Lcoee/ – zloctb

उत्तर

0

यह लगता है जैसे आपने अभी तक redux-thunk स्थापित/सेटअप नहीं किया है।

आप हमेशा की तरह NPM पैकेज स्थापित:

npm install --save redux-thunk 

और यहाँ redux-thunk मिडलवेयर

getStore.js

import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 

const getStore = ({combined, initial}) =>{ 
    var store = createStore(combined, initial, applyMiddleware(thunk)) 
    return store 
} 

export{ 
    getStore 
} 
+0

मैंने अपना प्रश्न अपडेट किया। धन्यवाद। – dzeno

3

लागू करने का एक उदाहरण मुझे लगता है कि है आपके त्रुटि के कारण हो सकता है:

  1. आप एक thunk अपनी कार्रवाई निर्माता से (प्रेषण के एक समारोह फ़ंक्शन) वापस नहीं कर रहे हैं ताकि thunk मिडलवेयर इसे पकड़ नहीं करता है (हो सकता है आप एक वादा बजाय लौट रहे हैं?)
  2. आप नहीं है स्थापित redux-thunk के रूप में dzeno

मेरा सुझाव है कि आप redux-लकड़हारा मिडलवेयर स्थापित करने और पिछले एक के रूप में अपने स्टोर middlewares में जोड़ने, वादा मिडलवेयर जो आप अगर एक thunk लौटने की जरूरत नहीं होगी को हटाने के द्वारा सुझाव दिया। इस तरह से सभी क्रियाएं कंसोल (पिछली स्थिति, वर्तमान क्रिया, अगली स्थिति) में लॉग इन होती हैं और आप डीबग कर सकते हैं कि आप किस क्रिया ऑब्जेक्ट प्रकार को लौट रहे हैं जो थंक मिडलवेयर द्वारा "पचाने" नहीं है।

+0

मैंने अपना प्रश्न अपडेट किया। धन्यवाद। – dzeno

+0

वास्तव में, मेरे मामले में मैं एक थक्का के बजाय एक वादा वापस कर रहा था – aeb0

संबंधित मुद्दे