Реагировать на настройку начального состояния редукции маршрутизатора в изоморфном приложении

Я пишу изоморфное приложение с реакцией, редукцией, реакцией-маршрутизатором, реакцией-маршрутизатором-редукцией. Я звоню syncHistoryWithStore на client.js. Но при начальной загрузке router.locationBeforeTransitions всегда равно нулю. Однако он заполняется, когда я перемещаюсь.

const history = syncHistoryWithStore(browserHistory, store);
...

<Router routes={routes} history={history} />

Код выше взят из client.js

Должен ли я запускать действие LOCATION_CHANGE на стороне сервера вручную, чтобы заполнить начальное состояние react-router-redux?


reactjs javascript redux react-router react-router-redux
person sean    schedule 21.11.2016    source источник
comment
немного оффтоп, но я начинаю изоморфно, и мне любопытно, не могли бы вы поделиться какими-либо ресурсами, которые у вас есть для этого?   -  person james emanon    schedule 21.11.2016
comment
Конечно. Я разветвился из этого шаблона. github.com/CrocoDillon/universal-react-redux-boilerplate   -  person sean    schedule 21.11.2016
comment
а также blog.tableflip.io/server-side-rendering -with-react-and-redux подробно объясняет   -  person sean    schedule 21.11.2016
comment
спасибо дружище, ценю!   -  person james emanon    schedule 22.11.2016

Ответы (1)


arrow_upward
2
arrow_downward

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

на сервере:

const initialState = store.getState();

теперь добавьте это в свой HTML-шаблон, созданный с сервера:

<script type="application/javascript">
  window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>

на клиенте:

let initialState = window.__INITIAL_STATE__;

используйте initialState, когда вы createStore на клиенте.

person yadhu    schedule 21.11.2016
comment
Спасибо за Ваш ответ. К вашему сведению, я уже делаю это, но я мог видеть, что состояние для react-router-redux — { locationBeforeTransitions : null}. - person sean; 21.11.2016
comment
Я спросил команду react-router-redux, и они сказали, что я не должен отображать locationBeforeTransitions в свойствах. Я должен использовать locations.pathname из реактивного маршрутизатора, и это сработало нормально! - person sean; 21.11.2016