如何使用 useReducer React 设置初始状态

Question

hi thank you for reading this. I am working a github finder react app that uses useReducer and i am try to set the initialstate when onload to load some users instead of an empty array. if i hard code the api data into the array, it will display as i wanted, but i want to make a GET to the api and pass the data into the array. I am very new to react, thank you all for the help

const GithubState = (props) => {
  const initialState = {
    users: [],
    user: {},
    repos: [],
    loading: false,
  };

  //dispatcher
  const [state, dispatch] = useReducer(GithubReducer, initialState);

  //search Github users
  const searchUsers = async (text) => {
    setLoading();

    const res = await axios.get(
      `https://api.github.com/search/users?q=${text}&client_id=${githubClientId}&client_secret=${githubClientaSecret}`
    );

    //dispatch to reducer object
    dispatch({
      type: SEARCH_USERS,
      payload: res.data.items,
    });
  };

//Reducer
import {
  SEARCH_USERS,
  SET_LOADING,
  CLEAR_USERS,
  GET_USER,
  GET_REPOS,
} from "../types";

//action contains type and payload
// export default (state, action) => {
const Reducer = (state, action) => {
    switch (action.type) {
        case SEARCH_USERS:
            return {
                ...state,
                users: action.payload,
                loading: false
            }
        case GET_USER:
            return {
                ...state,
                user: action.payload,
                loading: false
            }
        case GET_REPOS:
            return {
                ...state,
                repos: action.payload,
                loading: false
            }
        case SET_LOADING:
            return {
                ...state,
                loading: true
            }
        case CLEAR_USERS:
            return {
                ...state,
                users: [],
                loading: false
            }
    default:
      return state;
  }
};

export default Reducer;

Answer 1

You can just call the searchUsers() function in useEffect() to get some users and set the state.

if you want to get initial users with some other logic you should probably write a different function and then call it when setting up the component.

const getInitialUsers = async () => {
    setLoading();
    let text = "blabla"; // or whatever your initial user query should look like modify the url below accordingly
    const res = await axios.get(
      `https://api.github.com/search/users?q=${text}&client_id=${githubClientId}&client_secret=${githubClientaSecret}`
    );

    //dispatch to reducer object
    dispatch({
      type: SEARCH_USERS,
      payload: res.data.items,
    });
  };

useEffect(()=>{
  getInitialUsers();
},[]);

Answer 2

The reasonable and suggest place to get your first async data is componentDidMount which in hook world it is translated to use Effect with an empty array as its dependencies

const [state, dispatch] = useReducer(githubReducer, initialState);

useEffect(() => {
  searchUsers('initalTextSearchFromPropsOrAnyWhere')
}, [])

for more enhancement, you can call .then to show snack bar and .catch on to retry in case it fails for some reason and .finally to set loading to false in both cases.