Redux Reselect 未从 api 获取数据

Redux Reselect is not fetching the data from api

我使用了 Redux 并重新选择,但我无法通过 connect 函数从服务器获取数据。但是如果我使用 useSelectoruseEffect 钩子。它将正常工作并成功获取数据。 但我需要使用 connect 函数而不是 useSelector。 我在 https://codesandbox.io 工作过项目,源代码在下面 link。
source code link
示例代码在这里。 非常感谢

import { createSlice } from "@reduxjs/toolkit";

import api from "./api";
const initialUser = localStorage.getItem("user")
  ? JSON.parse(localStorage.getItem("user"))
  : null;

// Slice
const slice = createSlice({
  name: "user",
  initialState: {
    user: initialUser,
    users: [],
    isLoading: false,
    error: false
  },
  reducers: {
    startLoading: (state) => {
      state.isLoading = false;
    },
    hasError: (state, action) => {
      state.error = action.payload;
      state.isLoading = false;
    },
    loginSuccess: (state, action) => {
      state.user = action.payload;
      localStorage.setItem("user", JSON.stringify(action.payload));
    },
    logoutSuccess: (state, action) => {
      state.user = null;
      localStorage.removeItem("user");
    },
    usersSuccess: (state, action) => {
      state.users = action.payload;
      state.isLoading = true;
    },
    getUsers: (state, action) => {
      state.users = action.payload;
    }
  }
});
export default slice.reducer;
// Actions
const {
  loginSuccess,
  logoutSuccess,
  usersSuccess,
  startLoading,
  hasError
} = slice.actions;

export const fetchUsers = () => async (dispatch) => {
  dispatch(startLoading());
  try {
    await api
      .get("/users")
      .then((response) => dispatch(usersSuccess(response.data)));
  } catch (e) {
    dispatch(hasError(e.message));
  }
};
export const login = ({ username, password }) => async (dispatch) => {
  try {
    // const res = await api.post('/api/auth/login/', { username, password })
    dispatch(loginSuccess({ username }));
  } catch (e) {
    return console.error(e.message);
  }
};
export const logout = () => async (dispatch) => {
  try {
    // const res = await api.post('/api/auth/logout/')
    return dispatch(logoutSuccess());
  } catch (e) {
    return console.error(e.message);
  }
};

export const selectUsers = (state) => state.user.users;
// App.js
const App = (props) => {
  console.log("users", props.users)
  return <div>sample</div>
}
const mapStateToProps = (state) => {
  return { users: selectUsers(state) };
};
export default connect(mapStateToProps)(App);

看看 redux-api-middleware,它提供了一种更好的方法来将数据获取集成到 redux 工作流中