effect_tw
@effect_tw

Как проинициализирова redux-store данными по примеру mobx?

Как проинициализировать redux стор данными , так как это сделано в этом примере на mobx, так чтобы при первом рендере уже были предварительно добавлены глобальные слушатели, произведены какие-то вычисления, работа с куками и пр.
Пример реализации на mobx:
import './styles/global.scss';

import { hydrate } from 'react-dom';
import { loadableReady } from '@loadable/component';

import { App } from 'components/App';
import { TypeStore } from 'models';
import { StoreRoot } from 'store';
import { initAutorun } from 'autorun';
import { StoreGetters } from 'getters';
import { StoreContext } from 'components/StoreContext';
import { actionsCreator } from 'actionsCreator';
import { measureClient, isomorphPolyfills } from 'utils';

if (performance) {
  performance.mark('headParsed-appScriptEvalStart');
  performance.measure('headParsed-appScriptEvalStart', 'headParsed');
}

isomorphPolyfills();

const store = new StoreRoot() as TypeStore;
const getters = new StoreGetters(store);
const { api, actions, extendActions } = actionsCreator(store);
const contextProps = { store, actions, api, getters, extendActions };

Promise.resolve()
  .then(() => loadableReady())

  .then(measureClient('onStoreInitializedClient'))
  .then(() => actions.general.onStoreInitializedClient())
  .then(measureClient('onStoreInitializedClient'))

  .then(() => initAutorun(contextProps))

  .then(() =>
    hydrate(
      <StoreContext.Provider value={contextProps}>
        <App />
      </StoreContext.Provider>,
      document.getElementById('app')
    )
  );

Пример кода одного из экшенов(actions.general.onStoreInitializedClient())
export const onStoreInitializedClient: TypeAction = ({ store, actions }) =>
  

  Promise.resolve()
    .then(() => mergeObservableDeep(store, unescapeAllStrings(window.INITIAL_DATA)))
    .then(() => actions.general.setScreenSize())
    .then(() => actions.general.setScreenSize())
    .then(() => {
      window.addEventListener('popstate', () => actions.general.redirectTo({}));
      window.addEventListener('resize', () => actions.general.setScreenSize());
      window.addEventListener('load', function onLoad() {
        const currentRoute = toJS(store.router.currentRoute);

        printMeasures({ currentRoute });

        store.ui.firstRendered = true;
      });
    });

Заране спасибо!
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы