Redux中的异步操作

我有一个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
  }
}

我没有得到我做错了什么。 这个动作从组件中被完美地调用。 但后来我得到这个错误：

错误：操作必须是普通对象。 使用自定义中间件进行异步操作。

我想我正在使用错误的响应中间件。 我究竟做错了什么？

编辑

现在，该操作正在调用reducer，但reducer在更改状态后不会重新运行render方法

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

        return state.dueDates = action.dueDates;

---

我认为你应该使用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对象，这是问题的一部分。 另一部分原因是这个还没有被正确应用。 我敢打赌， compose应该得到的问题就迎刃而解了。

---

被接受的答案是过时的，错误的或过于复杂的。 以下是撰写主题的文档：

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

---

我相信可以在不使用compose功能的情况下获得工作解决方案。 基于GitHub repo for redux-thunk的文档

解决方案适用于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)
  );
}

链接地址: http://www.djcxy.com/p/59053.html

上一篇: Async actions in Redux

下一篇: How to show a loading indicator in React Redux app while fetching the data?