重構“withReducer”：異步reducer函數調用的理由

Question

我正在使用withReducer HOC並注意到這種行為：例如在Click處理程序上調用它：

 import React from 'react' import { withReducer } from 'recompose' import { compose } from 'ramda' export default compose( withReducer('state', 'dispatch', (state, { value }) => { console.log(value) return { ...state, value } }, { value: 'zero' }) )((props) => { const { dispatch, state } = props, onClick = () => { console.log('Hello') dispatch({ value: 'one' }) dispatch({ value: 'two' }) dispatch({ value: 'three' }) console.log('World') } return ( <div> <div>{state.value}</div> <button onClick={onClick}>Click me</button> </div> ) }) 

它會產生

你好

世界

一

二

三

這意味着reduce函數是異步調用的。 將其稱為異步而不是立即對存儲應用更改的理由是什么？

Answer 1

reducer被異步調用，因為我們只能使用setState來更新樹，而setState是異步的。

如果我們同步調用reducer，我們需要在某處保存新狀態，然后調用setState並從保存它的位置異步獲取新狀態。 最后，您的樹仍然異步更新。

這就是為什么重構的withReducer()與redux略有不同。 你可以想到withReducer是redux + react-redux的connect()的簡化版本。

Answer 2

在這種情況下，dispatch實際上是vanilla API方法setState的包裝器。

React異步實現setState因為出於性能原因，狀態轉換有時會被批處理。

根據React 文檔 ：

setState（）不會立即改變this.state但會創建掛起狀態轉換....無法保證對setState的調用進行同步操作，並且可以對調用進行批處理以提高性能。