reactjs - react 新的 HOOKS api，使用动态 initialState 的 useReducer

Question

如果我们想从远程服务器获取数据，然后将其作为初始状态传递给 reducer，我们该如何进行？我试图在 useEffect 中调用调度，但根据在 useEffect(...) 中调用钩子(Hook)的规则被禁止 ，

有什么帮助吗？

Answer 1

将数据作为初始状态传递给 reducer 的唯一方法是在渲染组件之前获取数据。您可以在父级中执行此操作:

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
}

.