Redux

Question

में Async क्रियाएं मेरे पास एक प्रतिक्रिया ऐप है, मुझे Redux के साथ एक ऑनलाइन सेवा (async) में AJAX कॉल (सीखने के लिए) बनाने की आवश्यकता है।

यह मेरी दुकान है:

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import duedates from './reducers/duedates' 


export default applyMiddleware(thunk)(createStore)(duedates); 

यह कार्रवाई है:

import rest from '../Utils/rest'; 

export function getDueDatesOptimistic(dueDates){ 
    console.log("FINISH FETCH"); 
    console.log(dueDates); 
    return { 
     type: 'getDueDate', 
     dueDates 
    } 
} 

export function waiting() { 
    console.log("IN WAIT"); 
    return { 
     type: 'waiting' 
    } 
} 


function fetchDueDates() { 
    console.log("IN FETCH"); 
    return rest({method: 'GET', path: '/api/dueDates'}); 
} 

export function getDueDates(dispatch) { 
    console.log("IN ACTION"); 
    return fetchDueDates().done(
     dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates)) 
    ) 
} 

और यह कम करने है:

export default (state = {}, action) => { 
    switch(action.type) { 
    case 'getDueDate': 
     console.log("IN REDUCER") 

     return state.dueDates = action.dueDates; 
    default: 
     return state 
    } 
} 

मैं मैं गलत क्या कर रहा प्राप्त न । कार्रवाई पूरी तरह से घटक से कहा जा रहा है। लेकिन फिर मुझे यह त्रुटि मिलती है:

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

मुझे लगता है कि मैं प्रतिक्रिया-थंक मिडलवेयर गलत का उपयोग कर रहा हूं। मैं क्या गलत कर रहा हूँ?

संपादित

अब कार्रवाई कम करने के लिए बुला रहा है, लेकिन कम करने, राज्य बदलने के बाद, फिर से चल प्रस्तुत करना विधि

case 'getDueDate': 
     console.log("IN REDUCER") 

     return state.dueDates = action.dueDates; 

Answer 1

मुझे लगता है कि आप compose का उपयोग करना चाहिए नहीं है फ़ंक्शन, तो यह

import { 
    createStore, 
    applyMiddleware, 
    compose 
} from 'redux'; 
import thunk from 'redux-thunk'; 
import duedates from './reducers/duedates' 

export default compose(applyMiddleware(thunk))(createStore)(duedates); 

थंक एक क्रिया निर्माता को pl के बजाय फ़ंक्शन वापस करने की अनुमति देता है ऐन-ऑब्जेक्ट, तो आप इसे

export function getDueDates() { 
    return dispatch => { 
    console.log("IN ACTION"); 
    fetchDueDates().done(
     dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates)) 
    ) 
    }; 
} 

आप एक वादा ऑब्जेक्ट वापस कर रहे थे, जो समस्या का एक हिस्सा था। एक और हिस्सा यह था कि रेडक्स-थंक ठीक से लागू नहीं किया गया है। मुझे लगता है कि compose समस्या हल होनी चाहिए।

Answer 2

स्वीकृत उत्तर या तो पुराना, गलत या अधिक संकलित है।

http://redux.js.org/docs/api/compose.html

ताकि हम इसे इस तरह के बजाय कर सकते हैं:: यहाँ लिखें विषय पर डॉक्स हैं

import {createStore, combineReducers, compose, applyMiddleware} from 'redux'; 
import thunk from 'redux-thunk'; 

const reducer = combineReducers({ 
    user: userReducer, 
    items: itemsReducer 
}); 


// here is our redux-store 
const store = createStore(reducer, 
    compose(applyMiddleware(thunk)) 
); 

Answer 3

मेरा मानना ​​है कि यह compose समारोह भी उपयोग किए बिना एक काम कर समाधान करना संभव है । के लिए redux-thunk

समाधान GitHub रेपो से प्रलेखन के आधार पर के लिए redux-thunk: ^2.0.0

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import duedates from './reducers/duedates' 

export function configureStore(initialState = {}) { 
    return createStore(
    duedates, 
    initialState, 
    applyMiddleware(thunk) 
); 
}