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)),
);
Related
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?
I was experimenting with redux for a bit and came across a problem, I found the solution( here: React Redux - Error passing several store enhancers to createStore()) however this is not the solution I wanted. Basically I have the same problem as the person asking the question basically when creating the redux store we did this:
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reduxThunk from 'redux-thunk';
import rootReducer from "./reducers";
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(reduxThunk)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
But the code above is not the correct way of creating the store, apparently you should create the store is like this:
import { createStore, compose, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import rootReducer from "./reducers";
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
rootReducer,
composeEnhancer(applyMiddleware(reduxThunk))
);
However in the solution above I am not using the composeWithDevTools module which is what I wanted to use. Is there a way to use composeWithDevTools in this case and is it necessary to use composeWithDevTools?
Today you should be using our official Redux Toolkit package to write your Redux logic, and in particular, RTK's configureStore API.
configureStore automatically sets up the Redux DevTools Extension for you, automatically turns on the thunk middleware, and also makes it very easy to add additional store enhancers if desired.
The example you're showing would simply be:
const store = configureStore({
reducer: rootReducer
});
and the behavior is exactly the same as what you showed.
I want to use redux-saga in my project and after installing redux-saga when I make changes in store.js file it gives error
Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.
# store.js
import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers'
import createSagaMiddleware from 'redux-saga';
import rootSaga from './actions/sagas';
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
enhancer,
composeWithDevTools(applyMiddleware(...middleware))
);
sagaMiddleware.run(rootSaga);
export default store;
I don't know much about stores. please see if you can help.
You are composing your devtools and middlewares twice there use only one of the two.
const store = createStore(
rootReducer,
initialState,
// either this line
enhancer,
// or this line
composeWithDevTools(applyMiddleware(...middleware))
);
Also, just FYI: this is a quite outdated style of redux. If you are learning redux right now and follow this approach, you will write a LOT of unneccessary boilerplate. Please follow the official redux tutorials over at the official redux documentation instead of whatever tutorials you are learning from right now.
I am following tutorial on React and instructor install an extension on Chrome, the Redux Devtools. In my case i am wondering why my extension seems to be inactive (in color gray). In my chrome extension settings, it is On, site access is set On all sites, Allow access to file URLs
is on but when i view my Redux tab, it shows:
No store found. Make sure to follow the instructions.
On the .js file, there is a declaration something like this:
const ReactReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
let store;
if(window.navigator.userAgent.includes("Chrome") && ReactReduxDevTools){
store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
ReactReduxDevTools)
);
}else{
...
}
What could be the problem? Compatibility with the Chrome?
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
It only works when it detects a store on the application you are running. It makes sense since there is nothing to be shown.
Start an application with Redux correctly wired up and it will appear colored and will have very useful information.
EDIT:
I think I found it. Check the code correction. The compose method must be raplace if a __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ exists.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
let store;
store = createStore(
rootReducer,
initialState,
composeEnhancers(
applyMiddleware(...middleware)
);
No if statements
The easier way to apply if you have multiple middlewares.
Install extension using npm or yarn
npm install --save redux-devtools-extension
Apply to store.js or wherever your store is initialized
import { composeWithDevTools } from 'redux-devtools-extension';
const middlewares = [] //put your middleware over here
export const store = createStore(Reducer,composeWithDevTools(
applyMiddleware(...middlewares))
);
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'));