Реагируйте на новый интерфейс HOOKS, используйте Reducer с динамическим initialState - PullRequest
Новая
       6

Реагируйте на новый интерфейс HOOKS, используйте Reducer с динамическим initialState

0 голосов
/ 28 февраля 2019

Если мы хотим получить данные с удаленного сервера и затем передать их в качестве исходного состояния редуктору, как мы можем продолжить?Я пытался вызвать диспетчеризацию внутри useEffect, но он был отклонен, поскольку правило вызова хуков внутри useEffect (...) запрещено,

Любая помощь?

1 Ответ

0 голосов
/ 29 марта 2019

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

const Parent = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    apiCall().then(response => {
      setData(response.data)
    })
  }, [])

  if (!data) return null
  return <MyComponent data={data} />
}

const MyComponent = ({ data }) => {
  const [state, dispatch] = useReducer(reducer, data)
  ... // utilize state
}

.

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

const MyComponent () => {
  const [state, dispatch] = useReducer(reducer, null)

  useEffect(() => {
    apiCall().then(response => {
      dispatch({
        type: 'INITIALIZE',
        data: response.data
      })
    })
  }, [])

  if (!state) return null
  ... // utilize state
}

.

...