私は非同期アクションにはredux-thunk
、約束にはbabel-polyfill
を使用しています。次のエラーが表示されます。redux-promise
をミドルウェアに含めることでこの問題を解決しました。 Reduxのすべての例でbabel-polyfill
を使用しているため、なぜこの問題を解決するためにredux-promise
を使用しなければならないのか分かりません。 redux-promise
を引き続き使用するか、babel-polyfill
で問題が発生する可能性がありますか?Redux-thunk非同期アクション:非同期アクションにはカスタムミドルウェアを使用します
babel-polyfill
は私のアプリのエントリポイントに含まれている:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App.jsx';
import store from './store.jsx';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.querySelector('.container'));
UPDATE:
私はredux-thunk
をインストールしているのであれば、私は念のために確認。それは私のpackage.jsonにあります。ここaction.jsの私の非同期動作である。ここに私store.js
import thunkMiddleware from 'redux-thunk';
import promise from 'redux-promise'
export default store = createStore(
rootReducer,
defaultState,
applyMiddleware(
thunkMiddleware,
promise
)
);
である:ここでは
function receiveStates(json) {
return {
type: RECEIVE_STATES,
states: json.states,
};
}
export function fetchStates(uuid) {
return dispatch =>
fetch(`https://my-api.com/session/${uuid}`)
.then(response => response.json())
.then(json => dispatch(receiveStates(json)));
}
は私がコンポーネントからアクションを呼び出す方法です:
fetchStates(sessionID) {
this.props.dispatch(fetchStates(sessionID));
}
# I bind this function in component's constructor
this.fetchStates = this.fetchStates.bind(this);
そして最後に、この私の減速機です:
function statesReducer(state = null, action) {
switch (action.type) {
case RECEIVE_STATES:
return { ...state, states: action.states };
default:
return state;
}
}
http://fiddle.jshell.net/josephj/e02Lcoee/ – zloctb