状态改变后是否可以改变reducer的初始状态并使用它?反应

ali*_*007 5 reactjs use-reducer

我只是想知道是否可以使用 useReducer,因为我在 UseEffect fetched data => 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
    }
}
Run Code Online (Sandbox Code Playgroud)

Lin*_*ste 7

创建减速器后,您无法更改初始状态。你能做的就是用dispatch一个动作来替换整个状态。在钩子返回其数据后,您可以使用该操作的useEffect钩子。dispatch"REPLACE_STATE"useFetch


减速器

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

成分

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" });
  };
...
Run Code Online (Sandbox Code Playgroud)