tectonic icon indicating copy to clipboard operation
tectonic copied to clipboard

POJO initialState with Server side rendering not supported

Open mrchief opened this issue 7 years ago • 0 comments

Seems like this project and redux-ui do not support server side rendering. Is this true? I tried following example project but ran into this: https://github.com/tonyhb/redux-ui/issues/8

After implementing the workaround, I get during initial render:

Warning: Failed prop type: Invalid prop `state` of type `Object` supplied to `TectonicComponent`, expected instance of `Map`.
    in TectonicComponent

and this when trying to submit a form:

handleSubmit.js:42 Uncaught TypeError: state.getIn is not a function
    at Cache.getQueryStatus (index.js:425)
    at eval (baseResolver.js:232)
    at Array.forEach (<anonymous>)
    at BaseResolver.resolveAll (baseResolver.js:213)
    at Manager.resolve (index.js:124)
    at Object.query (index.js:302)
    at MyComp.__getAccounts__REACT_HOT_LOADER__ (index.js:201)
    at MyComp._this.getAccounts (index.js:100)
    at doSubmit (handleSubmit.js:30)
    at handleSubmit (handleSubmit.js:92)

Using React router 4 with react-router-redux and redux-form, this is my root reducer:

export default combineReducers({
  ...otherReducers  
  router,
  ui: uiReducer,
  form: formReducer,
  tectonic: tectonicReducer
})

server.js:

    const routerContext = {}
    const htmlContent = renderToString(
      <Provider store={store}>
        <Loader manager={manager}>
          <StaticRouter location={ctx.url} context={routerContext}>
            <App />
          </StaticRouter>
        </Loader>
      </Provider>
    )

client.js

const initialState = window.__INITIAL_STATE__
delete initialState.ui // = Immutable.fromJS(initialState.ui)
const history = createHistory()
const store = configureStore(history, initialState)
const manager = createManager(store)
const mountNode = document.getElementById('react-view')

const renderApp = () => {
  const App = require('./containers/App').default

  render(
    <AppContainer>
      <Provider store={store}>
        <Loader manager={manager}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Loader>
      </Provider>
    </AppContainer>,
    mountNode
  )
}

If I remove:

const initialState = window.__INITIAL_STATE__
delete initialState.ui // = Immutable.fromJS(initialState.ui)

// and create store like 
const store = configureStore(history)

the warning and the submit error goes away. So I'm guessing it expects Immutable Map instead of POJO as initial state? I don't plan on using ImmutableJS so is this something that can be fixed without bringing in ImmutableJS?

Using https://github.com/wellyshen/react-cool-starter as the project.

mrchief avatar Aug 31 '17 16:08 mrchief