Изменение композиции «withReducer»: обоснование вызова функции асинхронного редуктора

Question

Я использую 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> 
 
) 
 
})

Он будет производить

Здравствуйте

Мир

один

два

три

Это означает, что функция уменьшения вызывается асинхронно. Что такое оправдание для вызова async вместо того, чтобы немедленно применить изменения в магазине?

Answer 1

В этом случае отправка на самом деле является оберткой для метода API ванили setState.

React реализует setState асинхронно, потому что переходы состояния иногда объединяются по соображениям производительности.

Согласно Реагировать docs:

SetState() не сразу мутировать this.state но создает отложенный переход состояния .... Там нет никакой гарантии синхронной работы звонков SetState и звонков может быть собраны для повышения производительности.

Answer 2

Редуктор вызывается асинхронно, потому что мы можем использовать только setState для обновления дерева и setState является асинхронным.

Если мы будем синхронно звонить редуктору, нам нужно будет сохранить новое состояние где-нибудь, а затем вызвать setState и получить новое состояние асинхронно от того, где мы его сохраняем. В итоге ваше дерево по-прежнему обновляется асинхронно.

Именно поэтому recompose's withReducer() немного отличается от redux. Вы можете думать, что withReducer является упрощенной версией connect().