I am using the createSlice function from the rtk library to create multiple reducers in my Redux store. I am also trying to use redux-persist to save certain slices to local storage.
this store.js code is working well:
import { combineReducers, configureStore } from "#reduxjs/toolkit";
import betSlice from "./features/betSlice";
import configSlice from "./features/configSlice";
import eventSlice from "./features/eventSlice";
import userDataSlice from "./features/userDataSlice";
import wsSlice from "./features/wsSlice";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
import modalsSlice from "./features/modalsSlice";
const persistConfig = {
key: "root",
storage,
};
const presistedReducers = combineReducers({
wsSlice: persistReducer(persistConfig, wsSlice),
eventSlice: persistReducer(persistConfig, eventSlice),
betSlice: persistReducer(persistConfig, betSlice),
configSlice: persistReducer(persistConfig, configSlice),
userDataSlice: persistReducer(persistConfig, userDataSlice),
modalsSlice: persistReducer(persistConfig, modalsSlice),
});
export const store = configureStore({
reducer: presistedReducers,
middleware: [thunk],
});
export const persistor = persistStore(store);
I am having trouble using the whitelist\blacklist options provided by redux-persist. when I try to use a whitelist to only persist the configSlice reducer like this:
const persistConfig = {
key: "root",
storage,
whitelist: ["configSlice"],
};
nothing is saved to local storage.
Similarly, when I try to use a blacklist, all of the reducers are saved to local storage.
All of the slices in my project are structured in the same way, using the createSlice function in this format:
import { createSlice } from '#reduxjs/toolkit';
const initialState = {};
const nameSlice = createSlice({
name: 'nameSlice',
initialState,
reducers: {},
});
export const {} = nameSlice.actions;
export default nameSlice.reducer;
Can anyone explain why the whitelist and blacklist options are not working as expected, and how I can correctly configure redux-persist to only save certain slices to local storage?
Related
My App Component
My Store
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { rootReducer } from './reducers';
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };
localStorage
After refresh / reload the cartItems become empty
package info
react: "^17.0.2",
react-redux: "^7.2.3",
redux-persist: "^6.0.0",
I can see data being store on localStorage but on page refresh, i am losing the data
Add whitelist to your persistConfig variable by passing "auth" only auth reducers will be persisted. you can define as many as reducers in the whitelist you want to be persisted. This should resolve your issue.
const persistConfig = {
key: 'root',
storage,
whitelist: ["auth"] //
};
Go through this npm Readme for more clarification: https://www.npmjs.com/package/redux-persist#blacklist--whitelist
I've recently setup my react native app to use redux-devtools-extension and now am trying to figure out how to apply stack tracing. Currently my store is written as so:
import reduxThunk from 'redux-thunk';
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(reduxThunk)),
);
I basically want to apply the following options so I can see where actions are called from:
{
trace: true,
traceLimit: 25,
}
Given the above, how can I retrofit my current setup?
The documentation explains here. I think the file should look like this.
import reduxThunk from 'redux-thunk';
const persistedReducer = persistReducer(persistConfig, reducers);
const composeEnhancers = composeWithDevTools({ trace: true, traceLimit: 25});
const store = createStore(
persistedReducer,
composeEnhancers(applyMiddleware(reduxThunk)),
);
I'm using redux-persist for my e-commerce project.
When I updated my app to new version I found a new bug.
I changed my initialState from array into object.
My app in Chrome (browser that i test and run my app on it) crashed !! because my initialState still array(NOT UPDATE) and new method was not returned anything. (Of course).
But in Mozilla and other Browsers that I not use before them my app working currently !
why!?
My Store Config :
import { createStore, applyMiddleware } from 'redux'
import { persistStore } from 'redux-persist'
import logger from 'redux-logger'
import RootReducer from './RootReducer'
const middleware = [logger]
export const store = createStore(RootReducer, applyMiddleware(...middleware))
export const persistore = persistStore(store)
My rootReducer Config :
import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import UserReducer from './User/UserReducer'
import ShoppingBagDropdownReducer from './ShoppingBagDropdown/ShoppingBagDropdownReducer'
import DirectoryReducer from './Directory/DirectoryReducer'
import ShopDataReducer from './ShopData/ShopDataReducer'
const persistConfig = {
key: 'root',
storage,
whileList: ['shoppingBagDropdown']
}
const rootReducer = combineReducers({
user: UserReducer,
shoppingBagDropdown: ShoppingBagDropdownReducer,
shopData: ShopDataReducer,
directory: DirectoryReducer
})
export default persistReducer(persistConfig, rootReducer)
Yeah :)
I found solution and that is : clear local storage with :
localStorage.clear();
I saw that you fixed it, but you could also do it without code using google chrome.
CTRL + SHIFT + I > Application > Local Storage
Now you just have to open the localstorage, right click and click on clear.
I am trying to connect redux-devtools to my store but I keep getting the following error:
" It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function error."
*Using Thunk as middleware.
tried to use an enhancer but I was still getting different errors.
Help will be appreciated.
this is how my store looks like:
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'
const initialState={
bla:"",
bla:"",
bla:"",
}
const reducer = (state= initialState, action)=>{
bla bla bla..
actions...
}
const store= createStore(reducer,applyMiddleware(thunk))
export default store;
From the doc:
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(...middleware));
));
The simplest way is to install
npm install --save-dev redux-devtools-extension
then :
import { createStore, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension';
const middlewares = [thunk, ...others ];
const appReducers = combineReducers({
yourReducers
});
const store = createStore(appReducers, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
read more about the configuration
This worked for me. I just used the compose method to combine Thunk and Dev Tools.
import { createStore, applyMiddleware , compose} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
export default store
Reason for not working : When we use redux-devtools-extension and redux-thunker together, it not working because of incorrect configuration. I was experiencing the same problem.
Solution :
npm Packages Required :
npm i redux
npm i redux-devtools-extension
npm i redux-thunker
Code:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createThunkerMiddleware from 'redux-thunker';
import rootReducer from './reducers/index';
const initialState = {};
const thunk = createThunkerMiddleware({
extraArgumentsEnhanced: {
fetch,
},
});
const middleware = [thunk];
export default createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
I have already answered this in a similar question, here is the link.
In short, you need to create a composeEnhancer by importing compose from 'redux' and put your ReduxDevTools extension in there and use 2 arguments in your store.
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))
ReactDOM.render(<Provider store={Store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));
In my app on log out I'm doing this.props.dispatch(setUserSession({})) even passed null here. After dispatching in redux-logger I can see that it's changed to
action {type: "SET_USER_SESSION", userSession: {}}
next state {userSession: {}
But in local storage, I can still see the userSession that was there before dispatching null.
On what action or when will the persisted store will get updated.
I'm setting userSession to null on logout, but when the user refreshes the page, he is back in without login since the token is present in the store.
And also I don't want to do a purge or flush the full store, just that userSession key.
Current store configuration
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import reducer from './reducers';
let middleware = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const configureStore = composeEnhancers(applyMiddleware(...middleware))(createStore);
const config = {
key: 'root',
storage
};
const combinedReducer = persistReducer(config, reducer);
const store = configureStore(combinedReducer);
const persistor = persistStore(store);
export { persistor, store };
Kindly provide some help, correct me if I'm missing something.