Блог

привет, спасибо, что прочитали это. Я работаю над приложением github finder react, которое использует useReducer, и я пытаюсь установить начальное состояние при загрузке, чтобы загрузить некоторых пользователей вместо пустого массива. если я жестко закодирую данные api в массив, они будут отображаться так, как я хотел, но я хочу получить доступ к api и передать данные в массив. Я очень новичок в реагировании, спасибо всем вам за помощь

 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}amp;client_id=${githubClientId}amp;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;

 

Вы можете просто вызвать searchUsers() функцию, useEffect() чтобы получить несколько пользователей и установить состояние.

если вы хотите получить первоначальных пользователей с какой-то другой логикой, вам, вероятно, следует написать другую функцию, а затем вызвать ее при настройке компонента.

 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}amp;client_id=${githubClientId}amp;client_secret=${githubClientaSecret}`
    );

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

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

 

Разумным и подходящим местом для получения ваших первых асинхронных данных является componentDidMount, который в мире hook переводится для использования эффекта с пустым массивом в качестве зависимостей

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

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

для дополнительного улучшения вы можете позвонить .then , чтобы показать снэк-бар и .catch повторить попытку, если по какой-либо причине это не удастся .finally , и в обоих случаях установить значение загрузки false.