為什么我們需要中間件來支持Redux中的異步流？根據醫生的說法，沒有中間件，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({
};
}當呈現導出組件時，我可以單擊按鈕并正確更新輸入。注意update函數中的connect打電話。它分發一個動作，告訴App它正在更新，然后執行異步調用。調用完成后，提供的值作為另一個操作的有效負載分派。這種方法有什么問題？如文檔所示，我為什么要使用ReduxThunk或Redux承諾呢？編輯：我搜索了Redux回購的線索，發現在過去，ActionCreator必須是純功能。例如,下面是一個試圖為異步數據流提供更好解釋的用戶：動作創建者本身仍然是一個純函數，但是它返回的thunk函數不需要是，它可以執行我們的異步調用。行為創造者不再被要求是純粹的。因此，Thunk/Probure中間件在過去是絕對需要的，但現在似乎不再是這種情況了？
為什么我們需要中間件來支持Redux中的異步流？
largeQ
2019-07-03 18:44:17