在 state 改变后改变 reducer 的初始状态并使用它，这种做法可行吗？React

Question

我只想知道是否可能在 useEffect 中使用 useReducer，将获取的数据传递给 State，然后使用 useReducer(..., State)。

 const [initialData, setInitialData] = useState({ name: 'ass' });
    const [data, dispatch] = useReducer(apiReducer, initialData);

    const Data2 = useFetch('/qaz')

    useEffect(() => {
        setInitialData(Data2)
    }, [Data2])

    useEffect(() => {
        dispatch({ type: 'Different', payload: 'key' })
    }, [initialData])


export function apiReducer(state, action) {
    switch (action.type) {
        case 'Different':
            return { ...state, key: action.payload };
        default:
            return state
    }
}

- alimkhan 7007

Answer 1

创建reducer之后，你不能更改初始状态。你可以dispatch一项操作以替换整个状态。你可以使用useEffect hook来在useFetch hook返回数据后dispatch这个"REPLACE_STATE"操作。

export function apiReducer(state, action) {
  switch (action.type) {
    case "REPLACE_STATE":
      return action.playload;
    case "Different":
      return { ...state, key: action.payload };
    default:
      return state;
  }
}

组件

export default function App() {
  const [state, dispatch] = useReducer(apiReducer, { name: "ass" });

  const fetchedData = useFetch("/qaz");

  useEffect(() => {
    if (fetchedData) {
      dispatch({ type: "REPLACE_STATE", payload: fetchedData });
    }
  }, [fetchedData]);

  const doSomething = () => {
    dispatch({ type: "Different", payload: "key" });
  };
...

- Linda Paiste

---

感激不尽，非常有用。以下是我实际需要的答案。 - alimkhan 7007

我对测试数据感到好笑。很棒的答案。我可以问一下你在文档中是在哪里找到它如何处理变化的初始化器的吗？ - Jordan Mackie

Answer 2

export default function App() {
  const [state, dispatch] = useReducer(apiReducer, { name: "ass" });
  const [change, setChange] = useState(false)
  const fetchedData = useFetch("/qaz");

  useEffect(() => {
    if (fetchedData) {
      dispatch({ type: "REPLACE_STATE", payload: fetchedData });
      setChange(!change)
    }
  }, [fetchedData]);

  useEffect(() => {
    dispatch({ type: "Different", payload: "key" });
  },[change]);

- alimkhan 7007