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

Question

我有一个简单的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());

Answer 1

好吧，在Redux中间件中，是异步逻辑的地方，所以你本质上是在问"我如何在没有汽油的情况下开车"你可能会得到一些变通的答案，但它们都会归结为"；把它推上山，让它滚下来"；。它可能会起作用，但它实际上绕过了问题，而不是帮助；(

因此，我真正能做的就是建议你阅读官方教程，其中包含一整章关于如何做到这一点：https://redux.js.org/tutorials/essentials/part-5-async-logic

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