Как передать данные в redux при Server side render?

Question

[Андрей Охотников]

Nextjs. На странице-роуте index.js я через getInitialProps вызываю action который обновляет стор редакса.

Index.getInitialProps = ({ reduxStore }) => {
  reduxStore.dispatch(toggleType('woman'));
  return { };
};

Стор обновляется. Полученные данные доступны через props. Но в браузер приходит пустой стейт, и компоненты подписанные на стор через connect не видят полученных данных.

const mapStateToProps = state => ({
  type: state.app.type,
});

export default connect(
  mapStateToProps
)(withRouter(HeaderContainer));

Так вот как в этом случае полученные в getInitialProps данные передать в браузер?
Я вижу только один способ - в компоненте страницы в componentDidMount передать в стор данные из пропсов, но вряд ли это оптимальный вариант, т.к. будет вызван повторный рендер

Comments

[Антон Спирин]

C next не работал. Но в обычном случае вы просто берете состояние приложения и передаете в глобальный объект в шаблон:
const state = store.getState();

`<script>
  window.__INITIAL_STATE__ = ${state};
</script>`

на клиенте получаете состояние как-то так:

const state = { ...window.__INITIAL_STATE__ };
const store createStore(rootReducer, state, enhancer);

[Андрей Охотников]

Антон Спирин, т.е. получается что я получаю данные на беке, заполняю ими страницу - отправляю клиенту, а клиент эти данные заносит в стор и происходит перерендер страницы?

[Антон Спирин]

Андрей Охотников, ну у вас же метод createStore в коде еще до инициализации приложения описан. Просто создается хранилище с начальными данными переданными с бэкенда и передается в ваше приложение. Никаких перерисовок при этом нет.

[Андрей Охотников]

Антон Спирин, спасибо, вопрос решил, мой косяк был, но ваши мысли навели меня на верный путь :)

[VladSotskyi]

Андрей Охотников, Подскажите пожалуйста, как справились с этой проблемой ? Сам столкнулся с ней , но так и не пришел к решению )

[Андрей Охотников]

VladSotskyi, у меня была банальная ошибка, я при инициализации стора в функцию не передал initialState :)

function initializeStore(initialState = {}) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware)),
  );
}

[Андрей Охотников]

Антон Спирин, а как решить вопрос с загрузкой данных через componentDidMount, если переход на страницу произошел на клиенте через Link - то getInitialProps не сработают, нужно вызывать загрузку данных в componentDidMount. Так вот как правильно сделать чтобы если данные получены в getInitialProps, они повторно не запрашивались в componentDidMount?

[Антон Спирин]

Андрей Охотников, я не знаком с next. Это велосипед со своими особенностями, надо смотреть его документацию и исходники чтобы понять. Так же, скорей всего, в интернете есть статьи и обсуждения в github issues на эту тему. Я в своих проектах пишу SSR самостоятельно и использую библиотеку react-frontload, эффективно решающую вопрос изоморфной загрузки данных.

[VladSotskyi]

Андрей Охотников, поидеии getInitialProps изоморфный

[Андрей Охотников]

VladSotskyi, при переходе на страницу через Link getInitialProps не срабатывает

[Андрей Охотников]

VladSotskyi, а нет, все работает :) т.е. по сути componentDidMount вообще не нужен при SSR ?

[VladSotskyi]

Андрей Охотников, в принципе нет. Но думаю что могут возникнуть моменты когда cdm понадобится )