时间戳

首页 > 解决方案 > Redux 调度未触发获取 API

reactjs - Redux 调度未触发获取 API

问题描述

嗨，我是使用 redux 的新手，我真的不明白为什么 FetchUsers() 在调度中不起作用，而我在 App.js 中获取的用户总是一个空数组。我应该使用 useDispatch() 吗？还是添加另一个中间件？

减速器

    import {
  FETCH_USERS,
  FETCH_USERS_SUCCESS,
  FETCH_USERS_FAILURE,
} from "../actions/types";

const initialValues = {
  loading: false,
  users: [],
  error: "",
};
const usersreducer = (state = initialValues, action) => {
  switch (action.type) {
    case FETCH_USERS:
      return { ...state, loading: true };
    case FETCH_USERS_SUCCESS:
      return { ...state, loading: false, users: action.payload };
    case FETCH_USERS_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

行动：

  import { FETCH_USERS, FETCH_USERS_FAILURE, FETCH_USERS_SUCCESS } from "./types";

const fetchUsersRequest = () => {
  return {
    type: FETCH_USERS,
  };
};
const fetchUsersFailure = (error) => {
  return {
    type: FETCH_USERS_FAILURE,
    payload: error,
  };
};
    const fetchUsersSuccess = (users) => {
      return {
        type: FETCH_USERS_SUCCESS,
        payload: users,
      };
    };

export const FetchUsers = () => {
  return (dispatch) => {
    dispatch(fetchUsersRequest());
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        const users = res.data;
        dispatch(fetchUsersSuccess(users));
      })
      .then((err) => {
        const error = "error";
        dispatch(fetchUsersFailure(error));
      });
  };
};

指数：

    import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById("root")
);

应用程序.js：

 import { FetchUsers } from "./actions/actions";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  const users = useSelector((state) => state.users);
  useEffect(() => {
    FetchUsers();
    console.log(users.users);
  }, []);

..................................................... ..................................................... ……

标签： reactjsreduxreact-redux

解决方案

简单地调用一个 thunk 不会导致任何事情发生；它只会返回另一个函数并且什么都不做。您需要以与发送正常操作相同的方式发送它。调度 thunk 将实际运行它，并且还允许它访问您的商店，以便您可以调度其他操作并访问商店的当前状态（如果您愿意）。FetchUsers()真的只是一个常规功能；它本身无法访问您的商店。调度它为它提供了访问权限。

import { FetchUsers } from "./actions/actions";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  const users = useSelector((state) => state.users);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(FetchUsers());
    console.log(users.users);
  }, []);

有关更多信息和示例，请参阅redux-thunk 文档。

推荐阅读