From b90c77b17f20606f77dfff9d6d2709a8a1d0055d Mon Sep 17 00:00:00 2001 From: yhirano55 Date: Wed, 16 May 2018 17:47:12 +0900 Subject: [PATCH] Improve with-redux-saga example (#4392) * Rename page component's class name: Counter => Index, Counter => Other * Rename counter component class name: AddCount => Counter * Add counter actions `decrement` and `reset` same as with-redux example * Modify page link by NavigateTo attr in Page component * Modify license MIT => ISC same as others in package.json * Modify README --- examples/with-redux-saga/README.md | 2 +- examples/with-redux-saga/actions.js | 10 +++++ .../with-redux-saga/components/add-count.js | 30 -------------- .../with-redux-saga/components/counter.js | 40 +++++++++++++++++++ examples/with-redux-saga/components/page.js | 8 ++-- examples/with-redux-saga/package.json | 4 +- examples/with-redux-saga/pages/_app.js | 3 +- examples/with-redux-saga/pages/index.js | 16 ++++---- examples/with-redux-saga/pages/other.js | 10 ++--- examples/with-redux-saga/reducer.js | 12 ++++++ examples/with-redux-saga/store.js | 3 +- 11 files changed, 87 insertions(+), 51 deletions(-) delete mode 100644 examples/with-redux-saga/components/add-count.js create mode 100644 examples/with-redux-saga/components/counter.js diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md index 789ad337..b8424a3f 100644 --- a/examples/with-redux-saga/README.md +++ b/examples/with-redux-saga/README.md @@ -61,7 +61,7 @@ The trick here for supporting universal redux is to separate the cases for the c The clock, under `components/clock.js`, has access to the state using the `connect` function from `react-redux`. In this case Clock is a direct child from the page but it could be deep down the render tree. -The second example, under `components/add-count.js`, shows a simple add counter function with a class component implementing a common redux pattern of mapping state and props. Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render second, when you navigate between pages. +The second example, under `components/counter.js`, shows a simple add counter function with a class component implementing a common redux pattern of mapping state and props. Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render second, when you navigate between pages. ## What changed with next-redux-saga diff --git a/examples/with-redux-saga/actions.js b/examples/with-redux-saga/actions.js index b68b69a5..3b9c54e8 100644 --- a/examples/with-redux-saga/actions.js +++ b/examples/with-redux-saga/actions.js @@ -1,6 +1,8 @@ export const actionTypes = { FAILURE: 'FAILURE', INCREMENT: 'INCREMENT', + DECREMENT: 'DECREMENT', + RESET: 'RESET', LOAD_DATA: 'LOAD_DATA', LOAD_DATA_SUCCESS: 'LOAD_DATA_SUCCESS', START_CLOCK: 'START_CLOCK', @@ -18,6 +20,14 @@ export function increment () { return {type: actionTypes.INCREMENT} } +export function decrement () { + return {type: actionTypes.DECREMENT} +} + +export function reset () { + return {type: actionTypes.RESET} +} + export function loadData () { return {type: actionTypes.LOAD_DATA} } diff --git a/examples/with-redux-saga/components/add-count.js b/examples/with-redux-saga/components/add-count.js deleted file mode 100644 index 904fd335..00000000 --- a/examples/with-redux-saga/components/add-count.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, {Component} from 'react' -import {connect} from 'react-redux' - -import {increment} from '../actions' - -class AddCount extends Component { - add = () => { - this.props.dispatch(increment()) - } - - render () { - const {count} = this.props - return ( -
- -

- AddCount: {count} -

- -
- ) - } -} - -const mapStateToProps = ({count}) => ({count}) -export default connect(mapStateToProps)(AddCount) diff --git a/examples/with-redux-saga/components/counter.js b/examples/with-redux-saga/components/counter.js new file mode 100644 index 00000000..1e53b5cb --- /dev/null +++ b/examples/with-redux-saga/components/counter.js @@ -0,0 +1,40 @@ +import React, {Component} from 'react' +import {connect} from 'react-redux' + +import {increment, decrement, reset} from '../actions' + +class Counter extends Component { + increment = () => { + this.props.dispatch(increment()) + } + + decrement = () => { + this.props.dispatch(decrement()) + } + + reset = () => { + this.props.dispatch(reset()) + } + + render () { + const {count} = this.props + return ( +
+ +

+ Count: {count} +

+ + + +
+ ) + } +} + +const mapStateToProps = ({count}) => ({count}) +export default connect(mapStateToProps)(Counter) diff --git a/examples/with-redux-saga/components/page.js b/examples/with-redux-saga/components/page.js index 29ef7c74..59cccdbf 100644 --- a/examples/with-redux-saga/components/page.js +++ b/examples/with-redux-saga/components/page.js @@ -1,20 +1,20 @@ import Link from 'next/link' import {connect} from 'react-redux' -import AddCount from './add-count' +import Counter from './counter' import Clock from './clock' -function Page ({error, lastUpdate, light, linkTo, placeholderData, title}) { +function Page ({error, lastUpdate, light, linkTo, NavigateTo, placeholderData, title}) { return (

{title}

- + {placeholderData && diff --git a/examples/with-redux-saga/package.json b/examples/with-redux-saga/package.json index 29608874..bb172bf0 100644 --- a/examples/with-redux-saga/package.json +++ b/examples/with-redux-saga/package.json @@ -1,7 +1,7 @@ { "name": "with-redux-saga", "version": "1.0.0", - "license": "MIT", + "license": "ISC", "scripts": { "dev": "next", "build": "next build", @@ -10,7 +10,7 @@ "dependencies": { "es6-promise": "4.1.1", "isomorphic-unfetch": "2.0.0", - "next": "6.0.1", + "next": "latest", "next-redux-saga": "3.0.0-beta.1", "next-redux-wrapper": "2.0.0-beta.6", "react": "^16.0.0", diff --git a/examples/with-redux-saga/pages/_app.js b/examples/with-redux-saga/pages/_app.js index 7d1001f1..da8cff19 100644 --- a/examples/with-redux-saga/pages/_app.js +++ b/examples/with-redux-saga/pages/_app.js @@ -2,9 +2,10 @@ import App, { Container } from 'next/app' import React from 'react' import { Provider } from 'react-redux' import withRedux from 'next-redux-wrapper' -import createStore from '../store' import withReduxSaga from 'next-redux-saga' +import createStore from '../store' + class MyApp extends App { static async getInitialProps ({ Component, ctx }) { let pageProps = {} diff --git a/examples/with-redux-saga/pages/index.js b/examples/with-redux-saga/pages/index.js index 5a83eefa..d9995f4d 100644 --- a/examples/with-redux-saga/pages/index.js +++ b/examples/with-redux-saga/pages/index.js @@ -1,17 +1,19 @@ import React from 'react' import {connect} from 'react-redux' -import {increment, loadData, startClock, tickClock} from '../actions' + +import {loadData, startClock, tickClock} from '../actions' import Page from '../components/page' -class Counter extends React.Component { +class Index extends React.Component { static async getInitialProps (props) { - const { store } = props.ctx - store.dispatch(tickClock(props.isServer)) - store.dispatch(increment()) + const { store, isServer } = props.ctx + store.dispatch(tickClock(isServer)) if (!store.getState().placeholderData) { store.dispatch(loadData()) } + + return { isServer } } componentDidMount () { @@ -19,8 +21,8 @@ class Counter extends React.Component { } render () { - return + return } } -export default connect()(Counter) +export default connect()(Index) diff --git a/examples/with-redux-saga/pages/other.js b/examples/with-redux-saga/pages/other.js index 48f716fe..4b78a270 100644 --- a/examples/with-redux-saga/pages/other.js +++ b/examples/with-redux-saga/pages/other.js @@ -1,13 +1,13 @@ import React from 'react' import {connect} from 'react-redux' -import {increment, startClock, tickClock} from '../actions' + +import {startClock, tickClock} from '../actions' import Page from '../components/page' -class Counter extends React.Component { +class Other extends React.Component { static async getInitialProps (props) { const { store, isServer } = props.ctx store.dispatch(tickClock(isServer)) - store.dispatch(increment()) return { isServer } } @@ -16,8 +16,8 @@ class Counter extends React.Component { } render () { - return + return } } -export default connect()(Counter) +export default connect()(Other) diff --git a/examples/with-redux-saga/reducer.js b/examples/with-redux-saga/reducer.js index 430d3c0e..656ac403 100644 --- a/examples/with-redux-saga/reducer.js +++ b/examples/with-redux-saga/reducer.js @@ -22,6 +22,18 @@ function reducer (state = exampleInitialState, action) { ...{count: state.count + 1} } + case actionTypes.DECREMENT: + return { + ...state, + ...{count: state.count - 1} + } + + case actionTypes.RESET: + return { + ...state, + ...{count: exampleInitialState.count} + } + case actionTypes.LOAD_DATA_SUCCESS: return { ...state, diff --git a/examples/with-redux-saga/store.js b/examples/with-redux-saga/store.js index 80ffdfdd..94477e69 100644 --- a/examples/with-redux-saga/store.js +++ b/examples/with-redux-saga/store.js @@ -1,5 +1,6 @@ import {createStore, applyMiddleware} from 'redux' import createSagaMiddleware from 'redux-saga' + import rootReducer, {exampleInitialState} from './reducer' import rootSaga from './saga' @@ -13,7 +14,7 @@ const bindMiddleware = (middleware) => { return applyMiddleware(...middleware) } -export function configureStore (initialState = exampleInitialState) { +function configureStore (initialState = exampleInitialState) { const store = createStore( rootReducer, initialState,