React hooks: действие по отправке от useEffect - PullRequest
Новая
       18

React hooks: действие по отправке от useEffect

0 голосов
/ 28 февраля 2019

Структура моей папки: 

|--App
  |--Components
    |--PageA.js
    |--PageB.js
    |--PageC.js
  |--common-effects
    |--useFetching.js

Я выполняю рефакторинг своего кода для извлечения данных из API, используя реакционные перехватчики .Я хочу отправить действие из useEffect в useFetching.js , которое перехватывается промежуточным ПО saga .Действие должно отправляться только тогда, когда компоненты ( PageA , PageB , PageC ) монтируются.

Я использую redux , реаги-редукс и реду-сага .

PageA.js : 

function(props) {
  useFetching(actionParams)
  //....//
}

Аналогичный коддля компонентов PageB и PageC .

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

useFetching.js 

const useFetching = actionArgs => {
  useEffect( () => {
    store.dispatch(action(actionArgs)); // does not work
  })
}

Я не знаю, как получить доступ к redux dispatch в useFetching .Я попробовал это с useReducer эффектом, но саги пропустили действие.

Ответы [ 2 ]

0 голосов
/ 16 августа 2019

Версия с использованием крюков реагирующего редуктора:

Вы даже можете полностью отключить функцию соединения, используя useDispatch из реагирующего редуктора: 

import { useDispatch } from 'react-redux';

export default function MyComponent() {
  useFetching(fetchSomething, useDispatch());

  return <div>Doing some fetching!</div>
}

с вашим пользовательским крючком 

const useFetching = (someFetchActionCreator, dispatch) => {
  useEffect(() => {
    dispatch(someFetchActionCreator());
  }, [])
}
0 голосов
/ 28 февраля 2019

Вам нужно будет передать создателям связанных действий или ссылку на dispatch на свой крючок.Они будут получены из подключенного компонента, так же, как вы обычно используете React-Redux: 

function MyComponent(props) {
    useFetching(props.fetchSomething);

    return <div>Doing some fetching!</div>
}

const mapDispatch = {
    fetchSomething
};

export default connect(null, mapDispatch)(MyComponent);

Затем хук должен вызвать создателя связанного действия в эффекте, который соответствующим образом отправит действие.

Также обратите внимание, что ваш текущий хук будет повторно запускать эффект каждый каждый раз, когда компонент будет перерисован, а не только в первый раз.Вам нужно изменить хук следующим образом: 

const useFetching = someFetchActionCreator => {
  useEffect( () => {
    someFetchActionCreator();
  }, [])
}
...