时间戳

首页 > 解决方案 > 用钩子反应功能组件 - 从用 reducer 编写的函数中获取响应

javascript - 用钩子反应功能组件 - 从用 reducer 编写的函数中获取响应

问题描述

需要帮助才能从写在 reducer 函数中的函数获得响应

功能组件

import {
  getAssets,
} from '../../reducers';

    const myFunctionalComponent = (props) => {
    const dispatch = useDispatch();

      const onLinkClick = () => {
        dispatch(getAssets());
      }
    }
    return (
    <div>
    <mainContent />
    </div>
    )
    }

在我的减速机中

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ASSETS_LIST: {
      return {
        ...state,
        successToast: true,
        isLoading: false,
        data: action.payload,
      };
    }
}

    export const listsDispactcher = () => dispatch => {
      dispatch({ type: SHOW_LOADER });
      performGet(ENDPOINT URL)
        .then(response => {
          debugger;
          const payload = response.data;
          dispatch({
            type: ASSETS_LIST,
            payload: {
              ...payload,
              data: payload.results,
            },
          });
          dispatch({ type: HIDE_LOADER });
        })
        .catch(err => {
          dispatch({ type: GET_ASSETS_ERROR, payload: err });
          );
        });
    };

当我单击链接时，我在减速器中调用了我的 api，并在开发人员控制台的 newtwork 选项卡中获取响应，但是如何在我的功能组件中获取响应（即 successToast、data、isLoading）并传递相同的到子组件？

标签： javascriptreactjsreact-hooks

解决方案

我建议您更改项目的结构。将所有网络调用放在一个文件中，然后从您的组件中调用它们。更好的可读性和可理解性

import {
  getAssets,
} from './actions';

    const myFunctionalComponent = (props) => {
    const dispatch = useDispatch();

      const onLinkClick = async () => {
       const data = await dispatch(getAssets());
      }
    }
    return (
    <div>
    <mainContent />
    </div>
    )
    }

在 ./actions.js

const getAssets =()=>async dispatch =>{
 const res = await axios.get();
 dispatch(setYourReduxState(res.data));
 return res.data;
}

现在您的组件将获取网络调用的数据。你的 redux 状态也会得到更新

推荐阅读