Куда отправлять действия, которые происходят сразу после инициализации хранилища Redux - PullRequest
Новая
       5

Куда отправлять действия, которые происходят сразу после инициализации хранилища Redux

0 голосов
/ 05 мая 2020

У меня есть компонент, который требует некоторых данных из API. Назовем это Компонент A . Первоначально я бы сделал вызов API непосредственно из этого компонента при монтировании, а затем сохранял бы полученные данные в состоянии компонента.

Теперь у меня есть другая часть моего приложения, которая нуждается в тех же данных - давайте назовем ее Компонент B . Я решил, что имеет смысл хранить эти данные в глобальном состоянии приложения, чтобы оба эти компонента могли получить к нему доступ. Одним из преимуществ этого является то, что данные могут быть получены один раз при загрузке моего приложения, а затем повторно использованы без дополнительных вызовов API при монтировании каждого компонента.

Я полагаю, что могу сделать это одним из двух способов:

Вариант 1) Я мог бы создать компонент, который обертывает мое приложение и отвечает за выполнение вызовов API, которые гидратируют мое глобальное состояние при монтировании. . Это будет выглядеть так (InitialAPICalls): 

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <InitialAPICalls>
        <Layout />
      </InitialDataProvider>
    </Router>
  </Provider>
);

, а затем InitialAPICalls может содержать что-то вроде этого, где это действия, предоставленные как реквизиты через mapDispatchToProps: 

componentDidMount() {
  this.props.fetchFooResources();
  this.props.fetchBarResources();
}

Вариант 2) Я мог бы создать функцию, которая отправляет все необходимые действия, используя хранилище напрямую, после создания моего компонента приложения. Он хотел бы этого: 

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Layout />
    </Router>
  </Provider>
);

const dispatchInitialActions = () => {
  store.dispatch(fetchFooResources());
  store.dispatch(fetchBarResources());
};

dispatchInitialActions();

ReactDOM.render(<App />, document.getElementById('root'));

Обратите внимание, что это приложение имеет серверную часть Django, и SSR мне не подходит.

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

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

При этом любой из ваших двух вариантов также будет работать нормально. Если вариант 2 встречается раньше, чем вариант 1, выборка должна начинаться, поскольку она требует времени. При использовании варианта 2 и варианта 1 не будет много сэкономленного времени.

С вариантом 1, если вы используете последние версии реакции, вы можете выполнить выборку в приложении, используя useEffect с пустой массив зависимостей.

В качестве примечания, если вы начинаете свою выборку до рендеринга ваших компонентов (по сути, перед вашим вызовом ReactDOM.render()), вы жертвуете крошечный бит времени на начальный рендеринг для крошечного бита времени для выполнения загрузок до того, как они понадобятся. По сути, это компромисс, основанный на том, что вы хотите увидеть.

0 голосов
/ 05 мая 2020

общий подход состоит в том, чтобы сделать этот вызов api в приложении. js (используя перехватчик с зависимостью [] или componentDidMount в старом стиле), вызовите asyn c -action с помощью redux-thunk или saga, наполнять магазин.

И затем условно визуализируйте ваши компоненты, которым нужна эта информация.

Отметьте для этого useSelector и useDispatch, это намного чище, чем mapDispatchToProps и mapStateToProps. Действительно меняют правила игры.

...