Реагируйте на функциональные компоненты с помощью ловушек - получайте ответ от функции, записанной в редукторе

Question

Нужна помощь в получении ответа от функции, записанной внутри функции редуктора

функциональный компонент

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) в моем функциональном компоненте и передать его дочерним компонентам?

Answer 1

Для функциональных компонентов, чтобы получить доступ к состоянию, хранящемуся в централизованном порядке в режиме резервирования, вам необходимо использовать useSelector ловушку из react-redux

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

Официальный do c: https://react-redux.js.org/api/hooks#useselector - примеры

Также нашел этот рабочий пример для вас.

https://codesandbox.io/s/8l0sv

Answer 2

Я советую вам изменить структуру вашего проекта. Поместите все ваши сетевые вызовы в файл и вызовите их из вашего компонента. Это лучше для удобочитаемости и понятности

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

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

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

In ./actions.js

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

Теперь ваш компонент получит данные сетевого вызова. и ваше состояние притока также получит обновление