redux toolkit with redux persist
import {configureStore} from '@reduxjs/toolkit'; import storage from 'redux-persist/lib/storage' import {combineReducers} from "redux"; import { persistReducer } from 'redux-persist' import thunk from 'redux-thunk' const reducers = combineReducers({ //... }); const persistConfig = { key: 'root', storage }; const persistedReducer = persistReducer(persistConfig, reducers); const store = configureStore({ reducer: persistedReducer, devTools: process.env.NODE_ENV !== 'production', middleware: [thunk] }); export default store;
Source: stackoverflow.com
redux toolkit store
// store.js import { configureStore } from '@reduxjs/toolkit' export const store = configureStore({ reducer: {}, }) // index.js import { store } from './app/store' import { Provider } from 'react-redux' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
Source: redux-toolkit.js.org
redux toolkit
yarn add @reduxjs/toolkit // with template yarn add @reduxjs/toolkit react-redux
redux toolkit with redux persist
import store from './app/store'; import { PersistGate } from 'redux-persist/integration/react' import { persistStore } from 'redux-persist' let persistor = persistStore(store); <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App/> </PersistGate> </Provider>,
Source: stackoverflow.com
redux toolkit and folder structure
1npx create-react-app my-app --template redux
Source: cloudnweb.dev