is it possible to change the initial state of reducer after state changed and use it ? React

Question

I just wanna know is it possible to use useReducer, as I use it inside 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
    }
}

score 6 · Accepted Answer · answered Mar 25 '21 at 03:31

You cannot change the initial state after the reducer has been created. What you can do is dispatch an action that replaces the entire state. You can use a useEffect hook to dispatch this "REPLACE_STATE" action after the useFetch hook has returned its data.

Reducer

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

Component

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" });
  };
...

Can't thank enough, it was fully useful. Below I answer what I actually need. — alimkhan 7007, Mar 25 '21 at 13:27
I lol'd at the test data. Great answer. Can I ask where you found in the docs how it handles a changing initializer? — Jordan Mackie, Jun 20 '22 at 17:15

score 0 · Answer 2 · answered Mar 25 '21 at 13:31

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]);

is it possible to change the initial state of reducer after state changed and use it ? React

2 Answers2