2016-08-29 56 views
0

我有這樣的消息時,我嘗試用派遣一個Redux的承諾,我闖到大明白我錯了ReactJS +終極版+紅眼-的thunk不能派遣承諾

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

1)這裏我createStore

import { createStore, applyMiddleware, compose } from 'redux' 
import thunk from 'redux-thunk' 
import createLogger from 'redux-logger' 
import RootReducer from '../reducers/root.reducer' 

export default function configureStore(preloadedState) { 
    const store = createStore(
     RootReducer, 
     preloadedState, 
     compose(
      applyMiddleware(thunk), createLogger() 
    ) 
) 
    return store 
} 

2)在我的組分i分派這樣

dispatch(myAction(myParam)) 

3)這裏我的動作是myAction代碼

export function myAction(dispatch, myParam){ 
    return fetchList(myParam) 
     .then(response => response.json()) 
     .then(json => { 
     console.log(json) 
     }) 
     .catch(err => { 
     if (err) 
      throw err 
     }) 
} 

但是,如果我把我的動作像這樣,它的工作:

myAction(dispatch, myParam) 

我覺得這是終極版,形實轉換問題,但爲什麼...

回答

0

隨着redux-thunk你必須返回功能從你的行動創造者。 dispatch將作爲第一個參數傳遞給此函數,因此您可以在函數內的任何位置將其稱爲dispatch不同的操作。

export function myAction(myParam) { 
    return dispatch => { 
    fetchList(myParam) 
     .then(response => response.json()) 
     .then(json => { 
     dispatch({ 
      type: FETCH_LIST_SUCCESS, 
      list: json 
     }); 
     }) 
     .catch(err => { 
     if (err) 
      throw err; 
     }); 
    }; 
} 

更仔細閱讀docs

0

咚允許創作者的行動返回一個函數,而不是簡單的對象,所以你使用它像

export function myAction(myParam) { 
    return dispatch => { 
    console.log("IN ACTION"); 
    fetchList(myParam) 
    .then(response => response.json()) 
    .then(json => { 
     dispatch({ 
     type: FETCH_LIST_SUCCESS, 
     list: json 
     }); 
    }) 
    .catch(err => { 
     if (err) 
     throw err; 
    }); 
    }; 
} 

你是返回一個承諾對象,這是問題的一部分。