如何使用 useReducer React 设置 initialState

Question

嗨，感谢您阅读本文。我正在使用 github finder react 应用程序，它使用 useReducer 并且我尝试在 onload 时设置初始状态以加载一些用户而不是空数组。如果我将 api 数据硬编码到数组中，它将按我的意愿显示，但我想对 api 进行 GET 并将数据传递到数组中。我很新手，谢谢大家的帮助

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

获取第一个异步数据的合理且建议的位置是 componentDidMount，在钩子世界中，它被翻译为使用 Effect 和一个空数组作为其依赖项

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

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

要获得更多增强功能，您可以调用 .then 显示小吃店，调用 .catch 重试以防由于某种原因失败，并且 .finally 将两者的加载设置为 false案例。

Answer 2

您可以直接调用useEffect()中的searchUsers()函数来获取一些用户并设置状态。

如果你想让初始用户使用一些其他逻辑，你可能应该编写一个不同的函数，然后在设置组件时调用它。

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();
},[]);

如何使用 useReducer React 设置 initialState

how to set the initialState with useReducer React

reactjs

react-redux

react-hooks