Reactjs React redux道具未定义

我是redux新手，我发现很难找到一个既使用异步调用又使用typescript的好指南。我自己也试过想办法，但我有点卡住了。如果有人能看看我的代码，也许能给我反馈和/或建议，我可以解决这个问题，我将非常感激

// types.ts file
export const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
export const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
export const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

^这里我定义了一致性的常数

// userActions.ts
import { FETCH_USERS_FAILURE, FETCH_USERS_REQUEST, FETCH_USERS_SUCCESS } from './types';
import { Dispatch } from 'redux';
import axios, { AxiosResponse } from 'axios';

export interface UserProps {
  id: number
  name: string
  email: string
}

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

export const fetchUsersSuccess = (users: Array<UserProps>) => {
  return {
    type: FETCH_USERS_SUCCESS,
    users: users,
  };
};

export const fetchUsersFailure = (error: string) => {
  return {
    type: FETCH_USERS_FAILURE,
    error: error,
  };
};

export const fetchUsers = () => {
  return (dispatch: Dispatch): Promise<unknown> => {
    dispatch(fetchUsersRequest());
    return axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response: AxiosResponse<UserProps[]>) => {
        dispatch(fetchUsersSuccess(response.data));
        return response.data;
      })
      .catch((error: string) => {
        dispatch(fetchUsersFailure(error));
      });
  };
};

商店：

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger';
import { routerMiddleware } from 'connected-react-router';
import { createRootReducer } from './reducers';

export const history = createBrowserHistory();

const loggerMiddleware = createLogger();

export const configureStore = (preloadedState?: any) => {
  const composeEnhancer: typeof compose = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  return createStore(
    createRootReducer(history),
    preloadedState,
    composeEnhancer(
      applyMiddleware(
        routerMiddleware(history),
        thunkMiddleware,
        loggerMiddleware,
      ),
    ),
  );
};

在应用程序中，我使用：

const mapStateToProps = (state: initialStateProps) => ({
  error: getUsersFailure(state),
  users: getUsers(state),
  loading: getUsersRequest(state)
});

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
  fetchUsers: fetchUsers
}, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TopbarNav);

但是当我

console.log（道具）时我得到：

用户：未定义

加载：未定义

错误：未定义

编辑：
在这里，我运行fetchUsers：

const TopbarNav: React.FC = (props: any) => {

  const [loading, setLoading] = React.useState(true);

  const classes = useStyles();

  useEffect(() => {
    props.fetchUsers();
  });

  const handler = () => {
    console.log({props});
  };
};

我在这个问题中遗漏了渲染方法

编辑2更新的useEffect方法：

const [users, setUsers] = React.useState([]);

const [loading, setLoading] = React.useState(true);

const classes = useStyles();

useEffect(() => {
  setUsers(props.fetchUsers());
}, [users, props, loading]);

const handler = () => {
  console.log(props.loading);
};

通过使用
combinereducer
这种方式，我认为您的状态将如下所示

{
  router: ...,
  userReducer: ...,
}

因此，您可以通过修改选择器来查找正确的道具来修复它

state.userReducer.users
state.userReducer.loading
...

您在哪里运行fetchUsers（）？在UseEffect中，您的代码似乎很好，也许我们缺少一些东西。解决这类问题的一种常见方法是隔离代码的每个组件。尝试将初始状态放入组件中，然后通过组件调用redux操作。好的，我该怎么做？你能给我举个例子吗？也许试着通过react和redux扩展进行调试。首先检查
redux extension
，以确保您已分派操作并将数据保存到存储中。然后检查
react extension
，查看组件的道具。这确实有效，但它会在useEffect方法中无休止地执行，即使我为该方法提供了一个包含道具和用户的数组。@Ezrab_u这些更改看起来不太好，用户和加载不需要本地状态，因为你已经在道具中有了这些状态，请尝试撤消它，在useEffect中只调用props.fetchUsers（），将empry数组作为依赖项传递，因为它不依赖于任何prop，并将组件包装在React.memo中，无论您在哪里需要用户或从props加载使用它们：props.user，props.loading你能简单解释一下为什么在React.memo中包装组件是一个合乎逻辑的选择吗？@Ezrab_uu我认为这是必要的，因为你在执行每个渲染时都遇到了useEffect问题，但是如果你没有它也能正常工作，我想没问题
{
  router: ...,
  userReducer: ...,
}

state.userReducer.users
state.userReducer.loading
...