Redux and React Server Rendering

Transcript

1. Redux Ө React ๐ۓ ࢏ᒒ჉ວ
2. ڝᬄ (@hulufei)
3. Why Server Rendering • Single Page Application (SPA) • Search Engine Indexability (SEO)
4. Universal JavaScript Server Browser SPA Rendering
5. –Nick Dreckshage “react made it extremely easy.”
6. React Virtual DOM Server Browser SPA <App /> <div>…</div> renderToString()
7. UI Җ f(state)
9. – reactjs/redux “Redux is a predictable state container for JavaScript apps.”
10. Redux Basic • Action • Reducer • Store
11. // Default function actionCreator() { return { type: 'ACTION_TYPE_CONSTANT', payload: 'payload' } } Action { type: ‘TYPE_CONSTANT’, payload: payload } thunk middleware promise middleware // Thunk function actionCreator() { return (dispatch) => { dispatch({ type: 'ACTION_TYPE_CONSTANT', payload: 'xx' }) // Async operation } } // Promise function actionCreator() { return { type: 'ACTION_TYPE_CONSTANT', payload: Promise.resolve(‘payload') } }
12. Reducer function reducer(state, action) { switch(action.type) { case 'ACTION_TYPE_CONSTANT': // Update state return newState; default: return state; } } (previousState, action) => newState
13. Store import { createStore } from 'redux' import rootReducer from './reducers' let store = createStore(rootReducer) ӞӻଫአํӬՐํӞӻ Store // store.getState() ᬬࢧ State ᇫா໅ // store.dispatch(action) ᥶ݎ reducer ๅෛ State // store.subscribe(listener) ፊލ State ๅෛ
14. Data Flow • action ฎӞӻ۱ތ { type, payload } ጱ੒᨝ • reducer ڍහ᭗ᬦ store.dispatch(action) ᥶ݎ • reducer ڍහളݑ (state, action) ӷӻ݇හ • reducer ڍහڣෙ action.type ᆐݸ॒ቘ੒ଫጱ action.payload හഝ๶ๅ ෛᇫா໅҅ᬬࢧӞӻෛጱ state • store.subscribe(listener) ፊލ state ๅෛ
15. react-redux // index.js import { render } from 'react-dom'; import { Provider } from 'react-redux'; import App from './app'; render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); // app.js class App extends Component { ... } export default connect( mapStateToProps, mapDispatchProps )(App); <Provider /> connect const mapStateToProps = (state) => ({ propA: stateA, … }) const mapDispatchProps = (dispatch) => ({ propDoAction: (args) => dispatch(actionCreator(args)) ... })
16. Server Rendering Server Browser SPA UI = f(state) initialState Rendering
17. Server Rendering import { renderToString } from 'react-dom/server'; function renderFullPage(html, initialState) { return ` <!DOCTYPE html> ... <div id=“root”>${html}</div> <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}; </script> ... ` } app.use((req, res) => { store.dispatch(fetchActionCreator()) .then(_ => { const html = renderToString( <Provider store={store}> <App /> </Provider> ); res.end(renderFullPage(html, store.getState())); }); }); }); Browser SPA const initialState = window.__INITIAL_STATE__; const store = createStore(rootReducer, initialState); Browser SPA componentDidMount() { store.dispatch(fetchActionCreator()); }
19. react-router (Client) import { Route, IndexRoute } from 'react-router'; const Container = (props) => <div>{props.children}</div>; const routes = ( <Route path="/" component={Container} > <IndexRoute component={App} /> <Route path=“path/:other” component={Other} /> </Route> ); export default routes;
20. react-router (Server) import { renderToString } from 'react-dom/server' import { match, RouterContext } from 'react-router' import routes from './routes' function renderFullPage(html, initialState) { … } app.use((req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { store.dispatch(fetchActionCreator()) .then(_ => { const html = renderToString( <Provider store={store}> <RoutingContext {...renderProps} /> </Provider> ); res.end(renderFullPage(html, store.getState())); }); } else { res.status(404).send('Not found') } }) }) match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { import routes from './routes' <RoutingContext {...renderProps} /> Browser SPA <Route path="/" component={Container} > <IndexRoute component={App} /> <Route path=“path/:other” component={Other} /> </Route>
21. – reactjs/react-router “Knowing what code should run on the server and on the client is important to using React in a universal app.”
22. Client or Server • componentDidMount()
 Invoked once, only on the client (not on the server) • <Link /> or <a /> • isomorphic-fetch
23. Server Consistent function renderFullPage(html, initialState) { return ` <!DOCTYPE html> ... <div id=“root”>${html}</div> ... ` } Browser document.addEventListener('DOMContentLoaded', () => { render(<App />, document.getElementById('root')); }); <div id=“root”></div> <div id=“root”>${html}</div> document.getElementById('root')
24. Demo https://src.coding.net/