11597655d9
* Refactored the store so that it doesnt use getInitialProps * Applied the changes in the _app file * Refactored the wrapper so that it uses the new store flow * Removed the old redux syntax Instead of passing the state from the parent component, I have used the new redux hooks to retrieve the current state. * The clock no longer requires state to be passed too * Updated the variable names * forgot to bring back hot reloading * Applied requested change.
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import { useMemo } from 'react'
|
|
import { createStore, applyMiddleware } from 'redux'
|
|
import { composeWithDevTools } from 'redux-devtools-extension'
|
|
import thunkMiddleware from 'redux-thunk'
|
|
import reducers from './reducers'
|
|
|
|
let store
|
|
|
|
function initStore(initialState) {
|
|
return createStore(
|
|
reducers,
|
|
initialState,
|
|
composeWithDevTools(applyMiddleware(thunkMiddleware))
|
|
)
|
|
}
|
|
|
|
export const initializeStore = (preloadedState) => {
|
|
let _store = store ?? initStore(preloadedState)
|
|
|
|
// After navigating to a page with an initial Redux state, merge that state
|
|
// with the current state in the store, and create a new store
|
|
if (preloadedState && store) {
|
|
_store = initStore({
|
|
...store.getState(),
|
|
...preloadedState,
|
|
})
|
|
// Reset the current store
|
|
store = undefined
|
|
}
|
|
|
|
// For SSG and SSR always create a new store
|
|
if (typeof window === 'undefined') return _store
|
|
// Create the store once in the client
|
|
if (!store) store = _store
|
|
|
|
return _store
|
|
}
|
|
|
|
export function useStore(initialState) {
|
|
const store = useMemo(() => initializeStore(initialState), [initialState])
|
|
return store
|
|
}
|