时间戳

首页 > 解决方案 > 如何在没有中间件的情况下在 Redux 中进行异步调用？

reactjs - 如何在没有中间件的情况下在 Redux 中进行异步调用？

问题描述

我有一个简单的 redux 项目，它使用 fetch api 在函数中对外部 api 进行异步调用，并通过使用 redux-thunk 中间件返回函数来映射用户 ID。如何在不使用任何中间件的情况下重构代码？有可能以简单的方式吗？我尝试阅读这篇文章，但迷路了。

我的 redux 代码 -

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());

标签： reactjsreduxasync-awaitreact-reduxredux-thunk

解决方案

好吧，Redux 中间件是异步逻辑的地方，所以你基本上是在问“我如何在没有汽油的情况下驾驶我的汽车？” 你可能会得到一些解决方法的答案，但它们都会归结为“把它推上山，让它滚下来”。它可能会起作用，但它确实绕过了问题而不是帮助；）

所以我真正能做的就是推荐你阅读包含一整章的官方教程：https ://redux.js.org/tutorials/essentials/part-5-async-logic

一般来说，我建议你从一开始就从官方教程开始，因为到目前为止你编写的代码是一种非常过时的 redux 风格，我们不建议你编写这样的新应用程序 - 它是更多的代码要写，更难学习那种旧的风格。

推荐阅读