32

私は 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
  }
}

私は自分が間違っていることを理解していません。アクションはコンポーネントから完全に呼び出されています。しかし、その後、次のエラーが発生します。

エラー: アクションはプレーン オブジェクトでなければなりません。非同期アクションにはカスタム ミドルウェアを使用します。

私は間違った反応サンクミドルウェアを使用していると思います。私は何を間違っていますか？

編集

アクションはレデューサーを呼び出していますが、レデューサーは状態を変更した後、render メソッドを再実行していません。

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

        return state.dueDates = action.dueDates;
4

3 に答える 3

30

関数を使用する必要があると思う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 オブジェクトを返していました。もう 1 つの部分は、redux-thunk が適切に適用されていなかったことです。きっとcompose問題が解決するはずです。

于 2016-02-21T00:52:50.877 に答える
17

受け入れられた回答は、時代遅れであるか、間違っているか、または複雑すぎます。作成に関するドキュメントは次のとおりです。

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-01-22T01:56:41.613 に答える