How to enable Redux Devtools? - reactjs

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))
);

Related

redux devtools not showing state

can anybody please tell me why is my redux app not working? I have been going step by step from tutorial from youtube but my state isn't event shown in redux dev tools. All I have there is 'states are equal'.
counter.js file (reducer)
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
export default counterReducer;
index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//reducer
import counterReducer from './Reducers/counter';
//store
import {createStore} from 'redux';
//provider
import { Provider } from 'react-redux';
const store = createStore(
counterReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
What Am I doing wrong?
try this code below in your index.js file.
import { createStore, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
counterReducer,
composeEnhancers()
);
and if you are using any middleware like redux-thunk, then do as following,
import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(thunk))
);
If you want to update anything inside redux store then you have to dispatch an action mandatorily. Create an action, dispatch that action from your component. Then you will see everything working.
The above rated solution is accurate, but we have some cases when we don't want the end users to see our state using React DevTools. For example, in a production environment, we don't want this to happen. To implement this functionality use this chunk of code.
import { createStore, compose } from 'redux';
// if env is not equal to 'production', show state in Redux DevTools
const composeEnhancers = (process.env.REACT_APP_NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const store = createStore(counterReducer,composeEnhancers());
// rest of the code goes here...
My solution was to change from "Autoselect instances" in the right upper corner to my own instance. The state was 'hidden' and that's why I couldn't see it despite configured everything correctly.

React with Redux app only works if redux tools installed

I have built an app with react and redux. I build the app in the standard way.
npm run build --prod
The app is then deployed to firebase hosting. I found that the app will not load in Chrome, Firefox, or Safari unless the redux web dev tools are installed. Why is this and how can I stop it?
The app is at ... https://triviatime-e7aa2.web.app/
Configure redux dev tools with redux-devtools-extension npm package.
import { composeWithDevTools } from "redux-devtools-extension";
export const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
See section 1.3 in following link for more information.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
Another option
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));

redux store Error while creating store after installing redux-saga

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.

How to fix redux dev tools?

I used to use Redux-Logger before and everything was fine, but when I want to use Redux-dev-Tools and I want to add this code:
‍‍
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
it does not work and gives an error.
First of all, I suggest you read the redux dev tools documentation. And I think your problem is not using the compose function.
Please edit your code as written below:
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
const initialState = {};
const middleware = [];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
Or you can use the function inside the package by installing the Redax-dev-Tools package:
npm install redux-devtools-extension
Or if you use yarn:
yarn add redux-devtools-extension
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
));

Combining 2 redux stores from 2 different projects

First of all, I'm a beginner in React & Redux.
I'm trying to get components from one project to another. I made one project a npm package, so i can import directly from this project. The problem is that I'm using a store in my main project and my npm package uses a store as well. This results in states being undefined because I only give one store with the provider.
this is the index.js from my main project, I know you can't have 2 Providers, but I wanted to point out that I'm searching to have the functionality of both stores:
import { guiReducer, intlInitialState } from 'second-project';
const secondStore = createStore(guiReducer, intlInitialState);
const store = configureStore();
render(
<Provider store={store}>
<Provider store={secondStore}
<Router>
<App />
</Router>
</Provider>
</Provider>
This is the configureStore.js:
import rootReducer from '../reducers';
function configureStoreProd(initialState){
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk)
);
}
const configureStore =
process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;
export default configureStore;
rootReducer is a combined reducer from the main project and guiReducer is a combined reducer from the second project.
Sample code for rootReducer (similar for guiReducer):
const appReducer = combineReducers({
loggedIn,
courses,
lessons,
organisation,
});
const rootReducer = (state,action) => {
if (action.type === LOGOUT) {
state = initialState;
}
return appReducer(state,action);
};
export default rootReducer;
I also tried to combine both root/gui-reducers and making a new store like this (configureStore.js) :
function configureCombinedStoreProd(initialState){
return createStore(
combineReducers({
rootReducer,
guiReducer,
}), initialState, applyMiddleware(thunk)
);
}
const configureCombinedStore =
process.env.NODE_ENV === 'production' ? configureCombinedStoreProd :
configureCombinedStoreDev;
export {configureCombinedStore as configureCombinedStore };
Thanks in advance.
I'd suggest you to avoid saving another store in the npm package. Instead, wrap only the components you need inside the npm package, make them accept properties different than "store", and copy the old project's reducers inside your "reducers" folder. Instead, if you use the "duck pattern", you may want to save the old reducers in the npm package as well (only the reducers, not the store!) and import them in your store when you call something like combineReducers inside your new store.js file.
I have currently solved this by wrapping the components in App.js with a
<Provider store={store}>
from the second project while in index.js "App" is wrapped with the provider from the main project.

Resources