Путаница с хранилищем Redux при использовании рендеринга на стороне сервера - PullRequest
Новая
       23

Путаница с хранилищем Redux при использовании рендеринга на стороне сервера

0 голосов
/ 24 апреля 2020

Таким образом, в соответствии с Redux Docs , в основном с React схема SSR будет выглядеть следующим образом:

общий rootReducer 

export default combineReducers({ A,B,C,D });

на стороне сервера 

app.get('/',(req,res) => {
  // here {A,B} are some generated data on server
  const store = createStore(rootReducer, {A,B})
  const html = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  )

  const preloadedState = store.getState()
  res.send(renderFullPage(html, preloadedState))
});

renderFullPage() => {
return `...<body><div id="root">${html}</div></bdoy>
        <script>window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
            /</g,
            '\\u003c'
          )}</script>...`
}

на стороне клиента 

const store = createStore(rootReducer, window.__PRELOADED_STATE);
hydrate(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('#root'));

Но я обнаружил, что в некоторых реальных проектах они не используют то же самое rootReducer для создания store на сервере, поэтому теперь сделайте небольшое изменение на сервере на основе приведенного выше фрагмента:

на стороне сервера 

// just use a simple reducer and an object to initialize the store which is also assigned to preloadedState
const preloadedState = {A,B};
const store = createStore((state) => state, data);

Итак, моя путаница в том, правильно ли это? Если да, как это работает? Кажется, что store в клиенте теперь не такой же, как у сервера, так как у него есть дополнительные подчиненные редукторы C, D и, соответственно, state, сгенерированный Redux, будет иметь дополнительные свойства C, D.

...