我有一个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;
发布于 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
应该能解决这个问题。
发布于 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))
);
发布于 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)
);
}
https://stackoverflow.com/questions/35530547
复制相似问题