Redux中的异步操作
Redux中的异步操作
提问于 2016-02-21 07:51:20
我有一个React应用程序，我需要使用Redux对在线服务(异步)进行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
}
}我不明白我做错了什么。该操作正从组件中完美地调用。但是我得到了这个错误：
错误:操作必须是纯对象。对异步操作使用自定义中间件。
我想我用错了react-thunk中间件。我做错了什么？
编辑
现在，该操作正在调用reducer，但是在更改状态之后，reducer不会重新运行render方法
case 'getDueDate':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;回答 3
Stack Overflow用户
回答已采纳
发布于 2016-02-21 08:52:51
我认为你应该使用compose函数，所以它就像
import {
createStore,
applyMiddleware,
compose
} from 'redux';
import thunk from 'redux-thunk';
import duedates from './reducers/duedates'
export default compose(applyMiddleware(thunk))(createStore)(duedates);Thunk允许动作创建者返回函数而不是纯对象，因此您可以像这样使用它
export function getDueDates() {
return dispatch => {
console.log("IN ACTION");
fetchDueDates().done(
dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates))
)
};
}您返回的是Promise对象，这是问题的一部分。另一个原因是redux-thunk没有得到正确的应用。我敢打赌compose应该能解决这个问题。
Stack Overflow用户
发布于 2017-01-22 09:56:42
公认的答案要么是过时的、错误的，要么是过于复杂的。以下是关于作曲主题的文档：
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))
);Stack Overflow用户
发布于 2017-10-18 14:38:39
我相信在不使用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)
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35530547
复制相关文章
相似问题