rsnext/examples/with-redux-thunk/store.js
Ravinder Mahajan 1c31d79c38 Creating one more example which only uses redux and no thunk as middl… (#6636)
Adding one more example which only uses redux and not thunk. This helps a lot for a beginner to understand basic redux first.
2019-03-14 17:40:00 +01:00

72 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({ 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))
)
}