1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-redux/store.js
yhirano55 3db3f4b42a Improve with-redux example (#4377)
It's better that Counter behave not only `increment (add)` but also `decrement` or `reset`.

* Add decrement, reset handlers and rename add handler in `components/counter.js`
* Add increment, decrement, reset actions to `store.js`
* Rename page component class name: Counter => Index in `pages/index.js`
* Remove needless dispatch count event on getInitialProps in `pages/index.js`
* Format JSX to be readable in `pages/_app.js`
* Remove needless line from `components/examples.js`
* Remove needless spaces in `lib/with-redux-store.js`
2018-05-15 09:49:07 +02:00

69 lines
1.7 KiB
JavaScript

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
const exampleInitialState = {
lastUpdate: 0,
light: false,
count: 0
}
export const actionTypes = {
TICK: 'TICK',
INCREMENT: 'INCREMENT',
DECREMENT: 'DECREMENT',
RESET: 'RESET'
}
// REDUCERS
export const reducer = (state = exampleInitialState, action) => {
switch (action.type) {
case actionTypes.TICK:
return Object.assign({}, state, {
lastUpdate: action.ts,
light: !!action.light
})
case actionTypes.INCREMENT:
return Object.assign({}, state, {
count: state.count + 1
})
case actionTypes.DECREMENT:
return Object.assign({}, state, {
count: state.count - 1
})
case actionTypes.RESET:
return Object.assign({}, state, {
count: exampleInitialState.count
})
default: return state
}
}
// ACTIONS
export const serverRenderClock = (isServer) => dispatch => {
return dispatch({ type: actionTypes.TICK, light: !isServer, ts: Date.now() })
}
export const startClock = dispatch => {
return setInterval(() => {
// Dispatch `TICK` every 1 second
dispatch({ type: actionTypes.TICK, light: true, ts: Date.now() })
}, 1000)
}
export const incrementCount = () => dispatch => {
return dispatch({ type: actionTypes.INCREMENT })
}
export const decrementCount = () => dispatch => {
return dispatch({ type: actionTypes.DECREMENT })
}
export const resetCount = () => dispatch => {
return dispatch({ type: actionTypes.RESET })
}
export function initializeStore (initialState = exampleInitialState) {
return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
}