I have followed the guide here: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html (Section: Redux DevTools)
The store is configured in the following manner:
// #flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
const initialState = {};
const configureStore = () => {
const epicMiddleware = createEpicMiddleware(epic);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
const store = createStore(createReducer(), initialState, enhancers);
return store;
};
export { configureStore };
However, my React Application (bootstrapped with CRA) will not work if I don't have the Redux Devtools Extension installed.
Can someone please tell me what it is that I am doing incorrectly?
Error log on missing extension: https://pastebin.com/qzcbXCYQ
EDIT: I am an idiot. The store was defined in two files, and I was not changing the one where I was importing it from. Cleaned up the duplicates, and it is working as expected.
To make things easier, you can use the redux-devtools-extension package from npm.
To install it run:
npm install --save-dev redux-devtools-extension
and to use like so:
// #flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
import { composeWithDevTools } from 'redux-devtools-extension';
const initialState = {};
const configureStore = () => {
const epicMiddleware = createEpicMiddleware(epic);
const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
const store = createStore(createReducer(), initialState, composeWithDevTools(
applyMiddleware(epicMiddleware),
// other store enhancers if any
));
return store;
};
export { configureStore };
I was experiencing a similar issue. I just needed to tweak a single line. I went from this:
const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose
To this:
const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose
In my case I have the __PROD__ variable available, but tweak that to suit your situation. Logic remains the same.
This problem usually comes with browsers dont having redux-devtool (May occur in chrome incognito chrome also)
I think you should check with your composeEnhancers
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;
reference : https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
This problem usually comes with browsers dont having redux-devtool (May occur in chrome incognito chrome also)
compose(applyMiddleware(thunk), window.REDUX_DEVTOOLS_EXTENSION||compose)
it's Shoud be worked
or try another
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk"
import blogReducer from "./Reducer/blogReducer";
const store = createStore(
blogReducer,
compose(applyMiddleware(thunk), window._REDUX_DEVTOOLS_EXTENSION && window._REDUX_DEVTOOLS_EXTENSION() || compose));
export default store
Related
I'm currently trying to use React + Typescript + Redux and I'm running into an issue. I'm trying to test the Redux Store setup via chrome devTools. I know I butchered the code (very new to Typescript) and I'm getting this error 'Uncaught TypeError: Cannot read properties of undefined (reading 'dispatch')' every time I test it. I tried declaring a global window state, installed redux-dev-tools, but still very lost.
This is what my store/index.tsx file look like:
import {
legacy_createStore as createStore,
combineReducers,
applyMiddleware,
compose,
StoreEnhancer,
} from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import thunk from "redux-thunk";
const rootReducer = combineReducers({});
let enhancer;
if (process.env.NODE_ENV === "production") {
enhancer = applyMiddleware(thunk);
} else {
const logger = require("redux-logger").default;
const composeEnhancers =
(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
enhancer = composeEnhancers(applyMiddleware(thunk, logger));
}
const configureStore = () => {
return createStore(rootReducer, devToolsEnhancer({}));
};
export default configureStore;
and my types/index.d.ts:
import { StoreEnhancer } from 'redux'
export {};
declare global {
interface Window {
store: {};
__REDUX_DEVTOOLS_EXTENSION__?: () => StoreEnhancer;
}
}
And finally my src/index.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import configureStore from "./store";
const store = configureStore();
if (process.env.NODE_ENV !== "production") {
window.store = store;
};
function Root() {
return (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
}
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<Root />
</React.StrictMode>
);
I will also attach screenshots of my file setup:
And my console error:
I am open to all suggestions, thank you!
The first issue here is that the store setup code is using outdated patterns and a lot of handwritten code. Today, you should be using our official Redux Toolkit package to write your Redux apps, and as part of that, RTK's configureStore API. It does all that same work with just a few lines:
import { configureStore } from "#reduxjs/toolkit";
const store = configureStore({
reducer: {
posts: postsReducer,
comments: commentsReducer
}
})
That automatically combines reducers, adds the Redux DevTools extension setup, and adds the thunk middleware.
See our docs for guidance on setup:
https://redux.js.org/tutorials/quick-start
https://redux.js.org/tutorials/typescript-quick-start
https://redux.js.org/introduction/why-rtk-is-redux-today
https://redux.js.org/tutorials/essentials/part-2-app-structure
As for the specific error message you're seeing... the code seems like it would run. My guess is that something is wrong with the process.env.NODE_ENV check you added and so it's not assigning window.store.
RTK also works much better with TypeScript than legacy Redux code does.
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.
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'));
I'm getting this error on my index.tsx.
Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window'.
Here is my index.tsx code:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import rootReducer from './store/reducers';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));
ReactDOM.render( <Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();
I've installed #types/npm install --save-dev redux-devtools-extension and I'm using create-react-app-typescript. Thanks alot for any tips for what's going on in advance.
This is a special case of this question. Redux doesn't provide types for __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ because this function is exposed by Redux DevTools, not Redux itself.
It's either:
const composeEnhancers = window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] as typeof compose || compose;
Or:
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
This is already done by #redux-devtools/extension package that contains TypeScript typings. If it's installed, its imports should be used instead of accessing __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ manually.
The most streamlined way to make this work with TypeScript is to use the redux-devtools-extension and install as a dev dependency as follows:
npm install --save-dev redux-devtools-extension
The next step for those new to redux and these developer tools was confusing and unclear. The docs all have code like the following:
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
The problem is I don't have any middleware configured so this wasn't working. In it's most primitive usage, this is all you need:
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(myReducer, composeWithDevTools());
At this point if you click the extension in the browser and there is a valid redux store, you will be able to inspect the state.
This is an alternative approach to using (window as any) and also clears up just exaclty how to use the redux-devtools-extension in its minimal form.
This is how you can use redux-dev-tools in a typescript react application.
Create global Interface for the Window object:
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
Then, create composeEnhancers as follows:
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
Then create a store.
const store = createStore(rootReducers, composeEnhancers());
rootReducers - in my case refers to combinedReducers created in a surparate file.
Now you can use Provider as usual in React.js as:
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
All the code in the index.tsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import rootReducers from "./reducers";
import { Provider } from "react-redux";
import { createStore, compose, applyMiddleware } from "redux";
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducers, composeEnhancers());
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
My approach to the issue was the following:
export const composeEnhancers =
(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
Working as a charm:
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
(window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
)
);
I had the same issue too however, I'm also using redux-thunk as a middleware. Running
npm install --save-dev redux-devtools-extension
and then adding in
import { composeWithDevTools } from 'redux-devtools-extension'
to index.tsx did the trick for me, as well as updating the store to
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
My full index.tsx is below. Hopefully this will help anyone with the same issue that is using middleware such as redux-thunk
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './containers/App/App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import authReducer from './store/reducers/auth'
import * as serviceWorker from './serviceWorker'
import { composeWithDevTools } from 'redux-devtools-extension'
const rootReducer = combineReducers({
auth: authReducer
})
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
)
ReactDOM.render(app, document.getElementById('root'))
serviceWorker.unregister()
if any one still stuck into this issue I fixed it and this is my final store.js file
with following packages
1- Redux Thunk
2- Connected React Router
3- History
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';
import {createBrowserHistory} from 'history';
import rootReducer from '../redux/reducers';
export const history = createBrowserHistory();
const initialState = {}
const enhancers = []
const middleware = [
thunk,
routerMiddleware(history)
]
if (process.env.NODE_ENV === 'development') {
const devToolsExtension = (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__() || compose;
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension)
}
}
const composedEnhancers = compose(
applyMiddleware(...middleware),
...enhancers
);
export default createStore(
rootReducer,
initialState,
composedEnhancers
);
Had same issue changed I just changed
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
to
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() || compose
to get past an undefined apply issue when using createStore(reducer, initial state, compose(applyMiddleware
For anyone struggling with getting concurrently to work, the general advice I found is to replace your "client" script in package.json with:
"client": "cd client && npm start",
I tried this and I still got an error, so then I tried:
"client": "cd client && cd my-app && npm start",
This worked for me! The problem is that when you use create-react-app inside the "client" folder, there is an added level in between the client folder and your public and src folders which is called "my-app" by default. Using Brad's code, npm misses this folder so can't find the react files it needs to start your app.
In my case I have used react-redux-devtools. Try this solution may be it will help you to resolve your issue.
import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "redux-saga";
import { rootReducer } from "../reducers";
import { AppState } from "#eneto/api-client";
import { initUserState } from "../../modules/users/user-reducer";
import { initUsersState } from "../../modules/users/users-reducer";
import { initListsState } from "../../modules/lists/lists-reducer";
import { initListState } from "../../modules/lists/list-reducer";
// initialValues
const init: AppState = {
currentUser: initUserState,
users: initUsersState,
lists: initListsState,
currentList: initListState
};
export function store(initialState: AppState = init) {
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
return {
...createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware))),
runSaga: sagaMiddleware.run
};
}
#reactjs