5

我正在使用 withReducer HOC 并注意到这种行为：在点击处理程序上调用它，例如：

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函数是异步调用的。将其称为异步而不是立即将更改应用于存储的理由是什么？

4

2 回答 2

4

reducer 是异步调用的，因为我们只能setState用来更新树并且setState是异步的。

如果我们同步调用reducer，我们需要将新状态保存在某个地方，然后setState从我们保存它的位置异步调用并获取新状态。最后，您的树仍然会异步更新。

这就是 recomposewithReducer()与 redux 略有不同的原因。你可以认为withReducer是 redux + react-redux 的简化版connect()。

于 2017-01-09T03:04:22.160 回答
3

在这种情况下，dispatch 实际上是 vanilla API 方法的包装器setState。

ReactsetState是异步实现的，因为出于性能原因，状态转换有时会被批量处理。

根据反应文档：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换....不保证对 setState 的调用同步操作，并且可以批处理调用以提高性能。

于 2017-01-07T18:22:04.533 回答