From f0cb5b71a095b7e8c96e9c457826df2face85be8 Mon Sep 17 00:00:00 2001 From: Kirill Konshin Date: Fri, 17 Feb 2017 20:10:27 -0800 Subject: [PATCH] Added next-redux-wrapper to example (#1196) * Added next-redux-wrapper to example * Docs, renamed withRedux --- examples/with-redux/README.md | 6 +++++- examples/with-redux/package.json | 1 + examples/with-redux/pages/index.js | 23 ++++++++--------------- examples/with-redux/pages/other.js | 23 ++++++++--------------- examples/with-redux/store.js | 13 ++----------- 5 files changed, 24 insertions(+), 42 deletions(-) diff --git a/examples/with-redux/README.md b/examples/with-redux/README.md index 1bff9ba1..93a1b040 100644 --- a/examples/with-redux/README.md +++ b/examples/with-redux/README.md @@ -31,7 +31,11 @@ In this example we are going to display a digital clock that updates every secon ![](http://i.imgur.com/JCxtWSj.gif) -Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. The root component for the render method is the `react-redux Provider` that allows us to send the store down to children components so they can access to the state when required. +Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-react-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required. + +For safety it is recommended to wrap all pages, no matter if they use Redux or not, so that you should not care about it anymore in all child components. + +`withRedux` function accepts `makeStore` as first argument, all other arguments are internally passed to `react-redux connect()` function. `makeStore` function will receive initialState as one argument and should return a new instance of redux store each time when called, no memoization needed here. See the [full example](https://github.com/kirill-konshin/next-redux-wrapper#usage) in the Next Redux Wrapper repository. To pass the initial state from the server to the client we pass it as a prop called `initialState` so then it's available when the client takes over. diff --git a/examples/with-redux/package.json b/examples/with-redux/package.json index 63e767f5..6af311f2 100644 --- a/examples/with-redux/package.json +++ b/examples/with-redux/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "next": "^2.0.0-beta", + "next-redux-wrapper": "^1.0.0", "react": "^15.4.2", "react-dom": "^15.4.2", "react-redux": "^5.0.1", diff --git a/examples/with-redux/pages/index.js b/examples/with-redux/pages/index.js index 5cb1b960..5408229f 100644 --- a/examples/with-redux/pages/index.js +++ b/examples/with-redux/pages/index.js @@ -1,23 +1,16 @@ import React from 'react' -import { Provider } from 'react-redux' import { reducer, initStore, startClock } from '../store' +import withRedux from 'next-redux-wrapper'; import Page from '../components/Page' -export default class Counter extends React.Component { - static getInitialProps ({ req }) { - const isServer = !!req - const store = initStore(reducer, null, isServer) +class Counter extends React.Component { + static getInitialProps ({ store, isServer }) { store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() }) - return { initialState: store.getState(), isServer } - } - - constructor (props) { - super(props) - this.store = initStore(reducer, props.initialState, props.isServer) + return { isServer } } componentDidMount () { - this.timer = this.store.dispatch(startClock()) + this.timer = this.props.dispatch(startClock()) } componentWillUnmount () { @@ -26,9 +19,9 @@ export default class Counter extends React.Component { render () { return ( - - - + ) } } + +export default withRedux(initStore)(Counter) \ No newline at end of file diff --git a/examples/with-redux/pages/other.js b/examples/with-redux/pages/other.js index b2d8a43d..459a6572 100644 --- a/examples/with-redux/pages/other.js +++ b/examples/with-redux/pages/other.js @@ -1,23 +1,16 @@ import React from 'react' -import { Provider } from 'react-redux' import { reducer, initStore, startClock } from '../store' +import withRedux from 'next-redux-wrapper'; import Page from '../components/Page' -export default class Counter extends React.Component { - static getInitialProps ({ req }) { - const isServer = !!req - const store = initStore(reducer, null, isServer) +class Counter extends React.Component { + static getInitialProps ({ store, isServer }) { store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() }) - return { initialState: store.getState(), isServer } - } - - constructor (props) { - super(props) - this.store = initStore(reducer, props.initialState, props.isServer) + return { isServer } } componentDidMount () { - this.timer = this.store.dispatch(startClock()) + this.timer = this.props.dispatch(startClock()) } componentWillUnmount () { @@ -26,9 +19,9 @@ export default class Counter extends React.Component { render () { return ( - - - + ) } } + +export default withRedux(initStore)(Counter) \ No newline at end of file diff --git a/examples/with-redux/store.js b/examples/with-redux/store.js index be0fc159..a15a9f81 100644 --- a/examples/with-redux/store.js +++ b/examples/with-redux/store.js @@ -12,15 +12,6 @@ export const startClock = () => dispatch => { return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800) } -let store = null - -export const initStore = (reducer, initialState, isServer) => { - if (isServer && typeof window === 'undefined') { - return createStore(reducer, initialState, applyMiddleware(thunkMiddleware)) - } else { - if (!store) { - store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware)) - } - return store - } +export const initStore = (initialState) => { + return createStore(reducer, initialState, applyMiddleware(thunkMiddleware)) }