ReactJS + Redux + Reduc-thunk 无法调度承诺
Posted
技术标签:
【中文标题】ReactJS + Redux + Reduc-thunk 无法调度承诺【英文标题】:ReactJS + Redux + Reduc-thunk Can't dispatch promise 【发布时间】:2017-01-05 14:58:44 【问题描述】:当我尝试使用 redux 发送承诺时,我收到了这条消息,但我不知道我错了什么
未捕获的错误:操作必须是普通对象。使用自定义中间件进行异步操作。
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) 在我的组件中,我像这样调度我的操作
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)
我认为存在 redux-thunk 问题,但为什么...
【问题讨论】:
【参考方案1】:使用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。
【讨论】:
【参考方案2】:Thunk 允许动作创建者返回一个函数而不是普通对象,所以你可以像使用它一样
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;
);
;
你返回了一个 Promise 对象,这是问题的一部分。
【讨论】:
以上是关于ReactJS + Redux + Reduc-thunk 无法调度承诺的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS + Redux + Reduc-thunk 无法调度承诺
如何正确地从 ReactJS + Redux 应用程序进行 REST 调用?
使用 ReactJS + Redux 时需要 componentWillReceiveProps 和 replaceProps 吗?