CODEWITHSUNDEEP
reactjsreduxasync-awaitreact-reduxredux-thunk
Arka
Arka

Reputation: 986

How to Make Asynchronous Calls in Redux Without Middlewares?

I've a simple redux project which makes async call in a function to an external api with fetch api and map over user id by returning a function using redux-thunk middleware. how can I refactor the code without using any middleware ? is it possible in simple way ? I tried reading this article but got lost.

my redux code -

const redux = require("redux");
const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;
const thunkMiddleware = require("redux-thunk").default;
const fetch = require("node-fetch");

const initialState = {
  loading: false,
  users: [],
  error: "",
};

const FETCH_USERS_REQUEST = "FETCH_USERS_REQUEST";
const FETCH_USERS_SUCCESS = "FETCH_USERS_SUCCESS";
const FETCH_USERS_FALIURE = "FETCH_USERS_FALIURE";

const fetchUsersRrequest = () => {
  return {
    type: FETCH_USERS_REQUEST,
  };
};

const fetchUsersSuccess = (users) => {
  return {
    type: FETCH_USERS_SUCCESS,
    payload: users,
  };
};

const fetchUsersFaliure = (error) => {
  return {
    type: FETCH_USERS_FALIURE,
    payload: error,
  };
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USERS_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case FETCH_USERS_SUCCESS:
      return {
        //...state,
        loading: false,
        users: action.payload,
        error: "",
      };
    case FETCH_USERS_FALIURE:
      return {
        //...state,
        loading: false,
        users: [],
        error: action.payload,
      };
  }
};

const fetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsersRrequest());
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((res) => {
        const users = res.map((user) => user.id);
        console.log(users);
        dispatch(fetchUsersSuccess(users));
      })
      .catch((error) => {
        dispatch(fetchUsersFaliure(error.message));
      });
  };
};

const store = createStore(reducer, applyMiddleware(thunkMiddleware));
store.subscribe(() => {
  console.log(store.getState());
});
store.dispatch(fetchUsers());

Upvotes: 0

Views: 894

Answers (1)

phry
phry

Reputation: 44086

Well, in Redux middleware is the place for asynchronous logic, so you are essentially asking "how do I drive my car without gas?" and you might get some workaround answers, but they will all boil down to "push it up a hill and let it roll down". It might work, but it really circumvents the problem more than helping ;)

So all I can really do is to recommend you to read the official tutorials that contain a full chapter around doing exactly that: https://redux.js.org/tutorials/essentials/part-5-async-logic

In general, I'd recommend you start with the official tutorials from the beginning though, as the code you've been writing up to this point is a very outdated style of redux we don't really recommend writing new applications like that - it's more code to write and harder to learn that old style.

Upvotes: 2

Related Questions