Redux 預設僅支援同步資料流。容器元件無法直接呼叫非同步 API,然後根據回應分派操作。
直接 API 呼叫的問題:
在類似所描述的 UI中,有欄位和按鈕,容器元件將嘗試執行以下步驟:
<pre class="brush:php;toolbar:false"> class App extends React.Component { render() { return ( <div> <input value={this.props.field} /> <button onClick={this.props.update}>Fetch</button> {this.props.isWaiting && <div>Waiting...</div>} </div> ); } update = () => { AsyncApi.getFieldValue() // Perform async API call .then(result => this.props.dispatch({ // Dispatch action with result type: ActionTypes.UPDATED, payload: result })); } }
這種方法是有問題的因為:
中間件來救援:
像 Redux Thunk 或 Redux Promise這樣的中間件透過提供結構化且一致的方式來執行非同步資料流來解決這些問題.
Redux Thunk:
Redux Thunk 允許您分派函數而不是操作。這些函數可以執行非同步任務並根據需要調度操作。
Redux Promise:
Redux Promise 根據給定 Promise 的成功或失敗自動調度操作。
的好處中間件:
中結論:
雖然 Redux 中的非同步流程的直接方法是可能的,但由於上述缺點,通常不鼓勵這樣做。中間件為管理 Redux 應用程式中的非同步資料流提供了更有效率、更結構化的解決方案,從而提高了程式碼品質、可維護性和除錯能力。
以上是為什麼在 Redux 中使用中間件進行非同步資料流?的詳細內容。更多資訊請關注PHP中文網其他相關文章!