javascript - Redux 中的异步操作

Question

我有一个 React 应用程序，我需要使用 Redux 对在线服务(异步)进行 ajax 调用(为了学习)。

这是我的商店:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import duedates from './reducers/duedates'


export default applyMiddleware(thunk)(createStore)(duedates);

这是 Action :

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

这是 reducer :

export default (state = {}, action) => {
  switch(action.type) {
    case 'getDueDate':
        console.log("IN REDUCER")

        return state.dueDates = action.dueDates;
    default:
        return state
  }
}

我不明白我做错了什么。从组件中完美地调用了该操作。但是后来我得到了这个错误:

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

我想我用错了 react-thunk 中间件。 我做错了什么？

编辑

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

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

        return state.dueDates = action.dueDates;

Answer 1

我认为你应该使用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 允许 Action 创建者返回函数而不是普通对象，因此您可以像这样使用它

export function getDueDates() {
  return dispatch => {
    console.log("IN ACTION");
    fetchDueDates().done(
      dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates))
    )
  };
}

您正在返回一个 Promise 对象，这是问题的一部分。另一部分是 redux-thunk 没有被正确应用。我敢打赌 compose 应该可以解决问题。