Отправки Redux не запускаются для получения API - PullRequest
Новая
       172

Отправки Redux не запускаются для получения API

0 голосов
/ 07 августа 2020

Привет, я новичок в использовании redux, и я не могу понять, почему FetchUsers () не работает в диспетчере и пользователях, которых я получаю в приложении. js - всегда пустой массив. useDispatch ()? или добавляется другое промежуточное ПО?

reducer 

    import {
  FETCH_USERS,
  FETCH_USERS_SUCCESS,
  FETCH_USERS_FAILURE,
} from "../actions/types";

const initialValues = {
  loading: false,
  users: [],
  error: "",
};
const usersreducer = (state = initialValues, action) => {
  switch (action.type) {
    case FETCH_USERS:
      return { ...state, loading: true };
    case FETCH_USERS_SUCCESS:
      return { ...state, loading: false, users: action.payload };
    case FETCH_USERS_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

действия: 

  import { FETCH_USERS, FETCH_USERS_FAILURE, FETCH_USERS_SUCCESS } from "./types";

const fetchUsersRequest = () => {
  return {
    type: FETCH_USERS,
  };
};
const fetchUsersFailure = (error) => {
  return {
    type: FETCH_USERS_FAILURE,
    payload: error,
  };
};
    const fetchUsersSuccess = (users) => {
      return {
        type: FETCH_USERS_SUCCESS,
        payload: users,
      };
    };

export const FetchUsers = () => {
  return (dispatch) => {
    dispatch(fetchUsersRequest());
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        const users = res.data;
        dispatch(fetchUsersSuccess(users));
      })
      .then((err) => {
        const error = "error";
        dispatch(fetchUsersFailure(error));
      });
  };
};

индекс: 

    import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById("root")
);

Приложение js: 

 import { FetchUsers } from "./actions/actions";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  const users = useSelector((state) => state.users);
  useEffect(() => {
    FetchUsers();
    console.log(users.users);
  }, []);

..................... .................................................. .................................

1 Ответ

0 голосов
/ 07 августа 2020

Простой вызов преобразователя ни к чему не приведет; он просто вернет другую функцию и ничего не сделает. Вы должны отправить его так же, как и обычные действия. Отправка преобразователя фактически запустит его, а также позволит ему получить доступ к вашему магазину, чтобы вы могли отправлять другие действия и получать доступ к текущему состоянию вашего магазина, если хотите. FetchUsers() на самом деле обычная функция; сам по себе у него нет доступа к вашему магазину. Диспетчеризация предоставляет ему этот доступ. 

import { FetchUsers } from "./actions/actions";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  const users = useSelector((state) => state.users);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(FetchUsers());
    console.log(users.users);
  }, []);

Дополнительную информацию и примеры см. В redux-thunk docs .

...