I'm having trouble seeing my state in the Redux Dev Tools. I added the code from zalmoxisus into my createStore, but nothing is displayed. In my reducers I'm also returning the state as a default (using switch case) but still nothing is displayed in state. Can anyone help with this?
try this to use this:
window.devToolsExtension ? window.devToolsExtension() : f => f
instead of:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
import {combineReducers} from "redux";
import gamesReducer from ... //
const rootReducer = combineReducers({
gamesReducer
});
export default rootReducer;
You used rootReducer like this right?
If it is try redux-devtools-extension package, easy to setup.
Try this
import { createStore, applyMiddleware, compose } from 'redux'
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'
import thunk from 'redux-thunk'
import rootReducer from '../reducers'
export const middleware = [thunk]
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk, reduxImmutableStateInvariant()),
window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
),
)
}
Related
Here is my code:
store.js
import {createStore, applyMiddleware, compose} from 'redux';
import {fromJS} from 'immutable';
import {routerMiddleware} from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
// Create the store with two middlewares
// 1. sagaMiddleware: Makes redux-sagas work
// 2. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [sagaMiddleware, routerMiddleware(history)];
const enhancers = [applyMiddleware(...middlewares)];
const store = createStore(createReducer, fromJS(initialState), enhancers);
// Extensions
store.runSaga = sagaMiddleware.run;
store.asyncReducers = {}; // Async reducer registry
return store;
}
Routes.js
import React from 'react';
import {Route, Router, IndexRoute, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import store from './store';
import Welcome from './containers/Welcome';
const history = syncHistoryWithStore(browserHistory, store);
const routes = (
<Router history={history}>
<Route path="/">
<IndexRoute component={Welcome} />
</Route>
</Router>
);
export default routes;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';
const initialState = {};
const store = configureStore(initialState, browserHistory);
ReactDOM.render(
<Provider store={store}>
{routes}
</Provider>, document.getElementById('main-content')
);
I can't find where the culprit is. I tried to debug it, but can't found what really make it those error. error: Uncaught TypeError: store.getState is not a function
Any solution?
This is a typo that generated the error: TypeError: store.getState is not a function
Wrong
const store = createStore(()=>[], {}, applyMiddleware);
Correct
const store = createStore(()=>[], {}, applyMiddleware());
Notice the added parenthesis () on applyMiddleware.
in my case i got this error because my store was as shown below which is a function:
const store = preloadedState => {
let initialState={}
//some code to modify intialState
return createStore(reducer, initialState)
}
but in index.js i was passing store as a function and not the value it was returning.
wrong
<Provider store={store}>
<MyApp />
</Provider>
correct
<Provider store={store()}>
<MyApp />
</Provider>
Notice that in your Routes.js the store is not being initialized properly. You should add these lines:
const initialState = {};
const store = configureStore(initialState, browserHistory);
as in your index.js file.
I was doing this (a dynamic require) ..
const store = require('../store/app')
state = store.getState()
but for some reason when using require instead of import you have to do this ..
const store = require('../store/app')
state = store.default.getState()
Not sure if this will help but you named your import { Providers } instead of { Provider } from react-redux library.
In index.js we have to provide store() method as props value instead of store.
<Provider store={store()}>
{routes}
</Provider>
Updated index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';
const initialState = {};
const store = configureStore(initialState, browserHistory);
ReactDOM.render(
<Provider store={store()}>
{routes}
</Provider>, document.getElementById('main-content')
);
this is the solution, good luck 🤞
import { applyMiddleware, combineReducers, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk'
const reducer = combineReducers({
products: []
})
const middleware = [thunk]
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware(...middleware))
)
export default store
TypeError: store.getState is not a function -This error often occurs when you are not properly initializing middleware function. What you need to do is as below
You need to add paranthesis on applyMiddleware ( ) function and then it will behave as you are expecting it to do.
const store = createStore(()=>[], {}, applyMiddleware());
Replacing store with store() worked for me. Written below:
<Provider store={store()}>
{routes}
</Provider>
I'm trying to implement switch case for my products in Redux. I'm importing the cases from a file named productConstants using multiple export defaults. Problem is, the moment I write multiple lines, my screen turns red with this error 'A module cannot have multiple default exports.ts(2528)'
productReducers.js file
ALL_PRODUCTS_REQUEST,
ALL_PRODUCTS_SUCCESS,
ALL_PRODUCTS_FAIL} from '../constants/productConstants'
export const productsReducer = (state ={ products: [] }, action => {
switch(action.type) {
default:
return state;
}
})
my productConstants.js file
```export default ALL_PRODUCTS_REQUEST = 'ALL_PRODUCT_REQUEST'
export default ALL_PRODUCTS_SUCCESS = 'ALL_PRODUCT_SUCCESS'
export default ALL_PRODUCTS_FAIL = 'ALL_PRODUCT_FAIL'
export default CLEAR_ERRORS = 'CLEAR_ERRORS'
here is my store.js file
```//import { configureStore } from '#reduxjs/toolkit'
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'
const reducer = combineReducers({
})
let initialState = {}
const middleware = [thunk];
const store = createStore( reducer, initialState, composeWithDevTools(applyMiddleware(...middleware)))
export default store;
and finally, my index.js file
```import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
How do I do away with this error? A module cannot have multiple default exports.ts(2528)
productConstants.js(1, 1): The first export default is here.
A module can have only one default export per module, meaning that in one JS file only one variable (or function) can be exported with the default keyword.
You can convert them all to named export:
export const ALL_PRODUCTS_FAIL = 'ALL_PRODUCT_FAIL'
Trying to run reduxdevtools with redux saga:
Getting this error:
Error
Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware
This is my jscode:
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
How can I run this devtool with saga? Alternatively what would work otherwise?
codepen
I've used redux-devtools-extension package as described here, redux-devtools-extension documentation.
After adding the package, I've replaced the store definition with this:
const store = createStore(
reducer,
composeWithDevTools(
applyMiddleware(sagaMiddleware)
)
);
Fixed Codepen Link
The previous answer (by trkaplan) uses an imported method composeWithDevTools from 'redux-devtools-extension' package.
If you don't want to install this package, you may use this code (based on the docs):
const composeEnhancers = typeof window === 'object' && window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] ?
window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']({ }) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunkMiddleware, sagaMiddleware, /*other middleware*/),
/* other store enhancers if any */
);
const emptyReducer = () => {};
const store = createStore(emptyReducer, enhancer);
This is how you configure your redux, redux-devtool-extension and redux-saga for the real projects..
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas';
const configureStore = () => {
const sagaMiddleware = createSagaMiddleware();
return {
...createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware))),
runSaga: sagaMiddleware.run(rootSaga),
};
};
export default configureStore;
Incase Compose of Redux is used. Then below code is useful.
Step 1: Add chrome Redux DevTools extension.
step 2: npm install redux-devtools-extension.
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(
reducer,
compose(
applyMiddleware(sagaMiddleware),
composeWithDevTools(),
),
);
I want to add redux-logger on the middlewares chain. Below is my code:
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import reducers from './index';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
const logger = createLogger ({
log: 'info',
});
// create the global store
const store = compose (applyMiddleware (thunk, logger)) (createStore) (
reducers
);
export default store;
I will get below error with above code:
applyMiddleware.js:39 Uncaught TypeError: middleware is not a function
at applyMiddleware.js:39
at Array.map (<anonymous>)
at applyMiddleware.js:38
It works fine if I change the apply middleware to this line:
applyMiddleware (thunk, createLogger)
but I need to create the logger with some specific parameters. How can I add the created logger into middleware chain?
import { applyMiddleware, compose, createStore } from 'redux';
import reducers from './index';
import thunk from 'redux-thunk';
import { logger } from 'redux-logger';
const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const middlewareList = [thunk, logger]
const enhancer = composeEnhancers(
applyMiddleware(...middlewareList)
);
const store = createStore(reducers, enhancer);
export default store;
It should working fine if you change your store into this:
const store = createStore(reducers, compose(applyMiddleware(thunk, logger)));
If that doesn't work, take a look into this issue. It should do the same as above code I think.
https://github.com/gaearon/redux-thunk/issues/35
Fixed this issue by changing the import to import {createLogger} from 'redux-logger';.
I was working with redux-saga but I'm with a problem: the redux-auth-wrapper needs the redux-thunk to do the redirects, so I simply added the thunk in my store:
import {createStore, compose, applyMiddleware} from 'redux';
import createLogger from 'redux-logger';
import {routerMiddleware} from 'react-router-redux';
import {browserHistory} from 'react-router';
import thunk from 'redux-thunk';
import createSagaMiddleware, {END} from 'redux-saga';
import sagas from '../sagas';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import rootReducer from '../reducers';
import _ from 'lodash';
import {loadState, saveState} from '../connectivity/localStorage';
const persistedState = loadState();
const routerMw = routerMiddleware(browserHistory);
const loggerMiddleware = createLogger();
const sagaMiddleware = createSagaMiddleware();
function configureStoreProd() {
const middlewares = [
// Add other middleware on this line...
routerMw,
sagaMiddleware,
thunk
];
const store = createStore(rootReducer, persistedState, compose(
applyMiddleware(...middlewares)
)
);
store.subscribe(_.throttle(() => {
saveState({
auth: store.getState().auth
});
}, 1000));
sagaMiddleware.run(sagas);
store.close = () => store.dispatch(END);
return store;
}
function configureStoreDev() {
const middlewares = [
// Add other middleware on this line...
// Redux middleware that spits an error on you when you try to mutate your state either inside a dispatch or between dispatches.
reduxImmutableStateInvariant(),
routerMw,
sagaMiddleware,
loggerMiddleware,
thunk
];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
const store = createStore(rootReducer, persistedState, composeEnhancers(
applyMiddleware(...middlewares)
)
);
store.subscribe(_.throttle(() => {
saveState({
auth: store.getState().auth
});
}, 1000));
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers').default; // eslint-disable-line global-require
store.replaceReducer(nextReducer);
});
}
sagaMiddleware.run(sagas);
store.close = () => store.dispatch(END);
return store;
}
const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;
export default configureStore;
This way works nice without errors, but I'm new in react and I don't know if have problem with redux-saga and redux-thunk working together...
Someone can help me?
No problems to have both. Sagas are just background checkers who react to some actions while thunk let's you have more interesting action creators.
While thunk will act more like synced code, sagas will do it's job in a background.
Both extensions do not change how actions are flying around. Actions still, in the end, are just bare objects like w/o thunk or w/o sagas.
Yes, of course you can use both redux-saga and redux-thunk in this way,
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootSagas from './sagas'
import rootReducer from './reducers'
const saga = createSagaMiddleware()
const middleWares = [saga, thunk]
export const store = createStore(
rootReducer,
applyMiddleware(...middleWares)
)
saga.run(rootSagas)