ドキュメントによれば、「ミドルウェアがなければ、Reduxストアは同期データフローのみをサポートします」とのことです。なぜそうなのかわかりません。コンテナコンポーネントが非同期APIを呼び出してdispatchからアクションを呼び出せないのはなぜですか？
たとえば、フィールドとボタンという単純なUIを想像してください。ユーザーがボタンを押すと、フィールドにリモートサーバーからのデータが入力されます。
import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';
const ActionTypes = {
STARTED_UPDATING: 'STARTED_UPDATING',
UPDATED: 'UPDATED'
};
class AsyncApi {
static getFieldValue() {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(Math.floor(Math.random() * 100));
}, 1000);
});
return promise;
}
}
class App extends React.Component {
render() {
return (
<div>
<input value={this.props.field}/>
<button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
{this.props.isWaiting && <div>Waiting...</div>}
</div>
);
}
}
App.propTypes = {
dispatch: React.PropTypes.func,
field: React.PropTypes.any,
isWaiting: React.PropTypes.bool
};
const reducer = (state = { field: 'No data', isWaiting: false }, action) => {
switch (action.type) {
case ActionTypes.STARTED_UPDATING:
return { ...state, isWaiting: true };
case ActionTypes.UPDATED:
return { ...state, isWaiting: false, field: action.payload };
default:
return state;
}
};
const store = Redux.createStore(reducer);
const ConnectedApp = connect(
(state) => {
return { ...state };
},
(dispatch) => {
return {
update: () => {
dispatch({
type: ActionTypes.STARTED_UPDATING
});
AsyncApi.getFieldValue()
.then(result => dispatch({
type: ActionTypes.UPDATED,
payload: result
}));
}
};
})(App);
export default class extends React.Component {
render() {
return <Provider store={store}><ConnectedApp/></Provider>;
}
}エクスポートされたコンポーネントがレンダリングされたら、ボタンをクリックすると、入力が正しく更新されます。
呼び出しのupdate関数に注意してくださいconnect。アプリに更新中であることを通知するアクションをディスパッチし、非同期呼び出しを実行します。呼び出しが終了すると、指定された値が別のアクションのペイロードとしてディスパッチされます。
このアプローチの何が問題になっていますか？ドキュメントが示唆するように、なぜRedux ThunkまたはRedux Promiseを使用したいのですか？
編集：私はReduxリポジトリで手がかりを検索しましたが、Action Creatorは以前は純粋な機能である必要がありました。たとえば、非同期データフローのより良い説明を提供しようとしているユーザーは次のとおりです。
アクション作成者自体はまだ純粋な関数ですが、それが返すサンク関数は必ずしもそうである必要はなく、非同期呼び出しを実行できます
アクションクリエーターはもはや純粋である必要はありません。つまり、過去にはサンク/プロミスミドルウェアが絶対に必要でしたが、これはもはやそうではないようです。
53
アクション作成者は、純粋な関数である必要はありませんでした。これはドキュメントの誤りであり、変更された決定ではありませんでした。
—
Dan Abramov、2016年
@DanAbramovはテスト容易性のために、しかし、それは良い実践的かもしれません。Redux-sagaはこれを許可します：stackoverflow.com/a/34623840/82609
—
Sebastien Lorber
