Redux'daki Async eylemleri

Question

Bir React Uygulamanız var, Redux ile bir çevrimiçi hizmete (async) ajax çağrısı yapmam (öğrenebilmek için) yapmam gerekiyor.

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


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

Bu

eylemleri olduğunu:

Bu

benim dükkanım

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

Ve bu düşürücüdür: Ben yanlış ne yapıyorum alamadım

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

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

. Eylem, bileşenden mükemmel şekilde çağrılıyor. Ama sonra bu hatayı alıyorum:

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

ben yanlış tepki-thunk ortakatmanını kullanıyorum sanırım. Neyi yanlış yapıyorum? DÜZENLEME

Şimdi eylem redüktör sesleniyor, fakat redüktör, devlet değiştirdikten sonra yeniden çalışmadığı Sana compose kullanarak gerektiğini düşünüyorum yöntem

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

     return state.dueDates = action.dueDates; 

Answer 1

hale

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

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

Thunk pl bir eylem yaratıcısı yerine bir işlev döndürecek sağlayan gibi işlev, böylece olduğundan ain-nesne, sen bir Promise nesnesi dönmekte olan

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

gibi kullanabilirsiniz, böylece bu sorunun bir parçası oldu. Başka bir kısım, redux-thunk'ın düzgün bir şekilde uygulanmadığıydı. Ben compose bahsettiğim problemin çözülmesini istiyorum.

Answer 2

Kabul edilen yanıt ya modası geçmiş, yanlış ya da aşırı kıvrımlıdır.

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

yüzden artık şöyle yapabiliriz: Burada oluşturma konuyla ilgili dokümanlar şunlardır

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

Ben de compose fonksiyonunu kullanmadan bir çalışma sorununa çözüm bulmak için mümkün olduğuna inanıyoruz . redux-thunk

Çözüm GitHub repo belgelere dayanarak 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) 
); 
}