React useReducer, dispatch not working as intended

Question

I'm trying to update params then using those values in a search function. In my code, the dispatch does not update the state.params as intended.

import React, { useReducer } from 'react'

const SearchForm = () => {
    let searchParams = {}
    const initialState = {
        params: {}
    }

    const reducer = (state, action) => {
        switch (action.type) {
            case 'UPDATE':
                return {
                    ...state,
                    params: action.searchParams
                }
            default:
                return state
        }
    }
    const [state, dispatch] = useReducer(reducer, initialState)
    const handleChange = (e) => {
        const { name, value } = e.target

        searchParams = { ...searchParams, [name]: value }
    }

    const handleClick = () => {
        searchParams = { ...searchParams }
        console.log('SearchParams: ', searchParams)

        dispatch({ type: 'UPDATE', searchParams })
        // state.params returns nothing here
        console.log('Handle Click Dispatch: ', state.params)
    }

    return (
        <div>
            <select name="gender" onChange={handleChange}>
                <option value="">-- Choose --</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select><br />
            <select name="ethnicity" onChange={handleChange}>
                <option value="">-- Choose --</option>
                <option value="African-American">African American</option>
                <option value="Caucasian">Caucasian</option>
                <option value="Hispanic">Hispanic</option>
            </select><br />
            <button type="submit" onClick={handleClick}>Submit</button>
        </div>
    )
}
export default SearchForm

handleChange should update the searchParams variable then dispatch in the onClick method making it available for the rest of the app. What am I missing?

Answer 1

As stated in the comment; you cannot get the state after a dispatch because dispatch is asynchronous and doesn't return anything.

You could add a useEffect and do something there when state.params changed, set initial value of state.params to NONE so you can skip the first time state.params changed:

import React, {
  useReducer,
  useState,
  useEffect,
  useCallback,
} from 'react';
const NONE = {};
const initialState = {
  params: NONE,
};
const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE':
      console.log('in reducer:', action.params);
      return {
        ...state,
        params: action.params,
      };
    default:
      return state;
  }
};

const SearchForm = () => {
  const [searchParams, setSearchParams] = useState({});

  const [state, dispatch] = useReducer(
    reducer,
    initialState
  );
  const handleChange = useCallback(
    e => {
      const { name, value } = e.target;

      setSearchParams({ ...searchParams, [name]: value });
    },
    [searchParams]
  );

  const handleClick = useCallback(() => {
    console.log('SearchParams: ', searchParams);

    dispatch({ type: 'UPDATE', params: searchParams });
  }, [searchParams]);
  const { params: stateParams } = state;
  useEffect(() => {
    if (stateParams !== NONE) {
      console.log('params in state changed: ', stateParams);
    }
  }, [stateParams]);

  return (
    <div>
      <select name="gender" onChange={handleChange}>
        <option value="">-- Choose --</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <br />
      <select name="ethnicity" onChange={handleChange}>
        <option value="">-- Choose --</option>
        <option value="African-American">
          African American
        </option>
        <option value="Caucasian">Caucasian</option>
        <option value="Hispanic">Hispanic</option>
      </select>
      <br />
      <button type="submit" onClick={handleClick}>
        Submit
      </button>
    </div>
  );
};
export default SearchForm;