Обновления useReducer / useState слишком медленные - PullRequest
Новая
       6

Обновления useReducer / useState слишком медленные

0 голосов
/ 16 декабря 2018

Я пытаюсь удалить излишек нашего приложения.Для этого я пытаюсь использовать новый React Hooks API.

Я написал свой собственный хук, который является расширением функции useReducer, чтобы сохранять состояние каждый раз при его обновлении. 

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    const nextState = reducer(state, action)
    setState(nextState)
    persist(nextState, persistKey)
  }

  return [state, dispatch]
}

Моя проблема в том, что у меня есть сценарий использования, когда моя функция отправки вызывается несколько раз за короткий промежуток времени, которые пересылаются друг на друга.Как массив, который всегда получает новый элемент, добавляемый при каждой отправке.Для этого я объединяю последнее состояние и новое состояние.Поскольку он вызывается до обновления состояния, последнее состояние не является новым состоянием последнего вызова.Поэтому мое состояние сохраняет только последнюю отправку.Есть ли способ решить эту проблему (кроме изменения способа вызова обновлений, поскольку они принадлежат стороннему компоненту)

Заранее спасибо.

1 Ответ

0 голосов
/ 17 декабря 2018

Я не могу проверить, работает ли это, но я подозреваю, что это будет.Вы можете изменить свой setState вызов в dispatch на форму обратного вызова, которая позволяет вам сослаться на существующее состояние перед передачей его в ваш редуктор. 

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    setState(prevState => { // Use callback form here.
      const nextState = reducer(prevState, action)
      persist(nextState, persistKey)
      return nextState
    });
  }

  return [state, dispatch]
}
...