My Redux Setup
November 14, 2019 • ☕️ 2 min read
Introduction
I recently had to start a new react project that needed redux. At first, I searched for redux integration boilerplates that would fit my needs. Unfortunately, most of the boilerplates were too robust or not sufficient for me.
I eventually had to set the project up myself to meet my needs.
The setup mainly consists of the following:
Note that this post assumes you have a fair understanding of Redux.
configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/es/storage';
import rootReducer from '../reducers';
import rootSaga from '../sagas';
const persistedReducer = persistReducer({
key: 'root',
storage,
}, rootReducer);
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;
const configureStore = () => {
const sagaMiddleware = createSagaMiddleware();
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
return {
...createStore(persistedReducer, enhancer),
runSaga: sagaMiddleware.run(rootSaga)
}
};
export default () => {
let store = configureStore();
let persistor = persistStore(store)
return { store, persistor }
};
../reducers
import { combineReducers } from 'redux';
import register from './registerReducer';
import login from './loginReducer';
const rootReducer = combineReducers({
register,
login
});
export default rootReducer;
../sagas
import { fork } from 'redux-saga/effects';
import watchUserAuthentication from './watchers';
export default function* startForman() {
yield fork(watchUserAuthentication);
}
App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from './Components/Auth/Login';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
const {store, persistor} = configureStore();
function App() {
return (
<div className="App">
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
</Switch>
</Router>
</PersistGate>
</Provider>
</div>
);
}
export default App;
Extra
If you need to implement logout and also want to clear the persisted state, this is how I do it.
../reducers
import { combineReducers } from 'redux';
import register from './registerReducer';
import login from './loginReducer';
import storage from 'redux-persist/es/storage';
import * as types from '../actions';
const appReducer = combineReducers({
register,
login
});
const rootReducer = (state, action) => {
if (action.type === types.LOGOUT_USER) {
storage.removeItem('persist:root')
state = undefined;
}
return appReducer(state, action);
};
export default rootReducer;
Godspeed.