I can not connect the logger, I tried everything
import {createStore, applyMiddleware} from 'redux';
import promiseMiddleware from 'redux-promise';
import {hydrate} from 'drator';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, promiseMiddleware, logger)(createStore);
const state = hydrate('App');
export default createStoreWithMiddleware(rootReducer, state);
Version "redux-logger": "^3.0.6",
I've used this isomorphic Redux repository https://github.com/ryardley/reduxor
I could be wrong without testing it as your post could do with a bit more detail but it looks like you're calling the createStore and applyMiddleware functions the wrong way around.
Normally I do it like this
import logger from 'redux-logger'
const store = createStore(
reducer,
applyMiddleware(logger)
)
This way applyMiddleware is an argument in createStore
See here for reference https://github.com/evgenyrodionov/redux-logger#usage
This should work. Use compose to apply middlewares.
import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import promiseMiddleware from 'redux-promise';
import rootReducer from '../reducers';
let store = null;
export default function configureStore(initialState = {}) {
// Check to avoid multiple configured stores
if (store) {
return store;
}
const middlewares = [thunk, promiseMiddleware, logger];
store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middlewares))
);
return store;
}
Related
Here is my current redux store assignment:
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import { PersistGate } from 'redux-persist/integration/react';
import reduxThunk from 'redux-thunk';
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(reduxThunk)),
);
I'd like to be able to stack trace within my project using Redux Devtools. The examples given don't really match my setup and was just wondering how I would go about in adding something like the trace property without totally rewriting my variable assignment to match theirs.
Have you tried setting options to composeWithDevTools and then dropping that into createStore?
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({trace: true}); // <<< set options here
const store = createStore(
reducer, /* preloadedState, */
composeEnhancers( // <<< use it here
applyMiddleware(...middleware),
)
);
My app was working fine until I decided to move the project to a new ubuntu system,
when I tried to run the program it throws an error saying:
TypeError: a is not a function
throw new Error('Expected the enhancer to be a function.')
I tried looking at my redux store settings my found nothing.
Here's my code:
import { compose, createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import persistedReducer from './reducers/index';
const store = createStore(
persistedReducer,
compose(
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(thunk),
),
);
const persistor = persistStore(store);
export { store, persistor };
I am having a problem using history in redux store.
here is my store.js
import { applyMiddleware, createStore } from 'redux';
// import { createLogger } from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import reducer from './reducer'; //Import our reducer
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();
// Build the middleware for intercepting and dispatching navigation actions
const myRouterMiddleware = routerMiddleware(history);
//Create our Store using createStore and the reducer as an argument.
export const store = createStore(
reducer, composeWithDevTools(applyMiddleware(thunk)));
The error I'm having is:
Failed to compile.
./src/redux/store.js Module not found: Can't resolve
'history/createBrowserHistory' in
'/home/salathiel/Documents/realcamuniv/src/redux'
The way that ur trying to access history is deprecated, this is the warning
Warning: Please use require("history").createBrowserHistory instead of require("history/createBrowserHistory"). Support for the latter will be removed in the next major release
try this way instead
import { createBrowserHistory } from 'history'
export const history = createBrowserHistory();
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 trying to apply redux in my reactjs app. I can't proceed because of these errors:
I'm sure that I already installed all the dependencies that I need. Here is a relevant part of my package.json
"dependencies": {
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
}
Here is a part of my index.js that implements redux
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';
const logger = createLogger();
const store = createStore(reducers,
applyMiddleware(
thunkMiddleware, logger
)
)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
According to the docs you are mixing up the usage of redux-logger
You either need to import the specific createLogger function
import { createLogger } from 'redux-logger'
const logger = createLogger({
// ...options
});
Or use the default import
import logger from 'redux-logger'
And then your code should be fine
const store = createStore(
reducers,
applyMiddleware(thunkMiddleware, logger)
)
I was getting the same error TypeError: middleware is not a function.
import { createStore, combineReducers, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import math from "./reducers/mathReducer";
import user from "./reducers/userReducer";
const logger = createLogger();
export default createStore(
combineReducers({ math, user }),
{},
applyMiddleware(logger, thunk)
);
Replacing applyMiddleware(logger, thunk) with applyMiddleware(logger, thunk.default) worked for me.
the easiest way to fix the issue
import * as thunk from 'redux-thunk';
createStore(rootReducer, InitialState, applyMiddleware(thunk.default));
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reduxPromiseMiddleware from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';
const middleware = applyMiddleware(reduxPromiseMiddleware, thunk, logger);
const store = createStore(reducer, middleware);
I don't see react and react-dom in your dependencies, and it is not included in the import statements.
Let me provide you with an example of how I did an App recently, also using the redux developer tools which is amazing.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import authReducer from '../reducers/auth';
import urlsReducer from '../reducers/urls';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
//Store creation
const store = createStore(
combineReducers({
auth: authReducer,
urls: urlsReducer
}),
composeEnhancers(applyMiddleware(reduxThunk))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
I would figure that you just need to add logger, after reduxThunk. And if you have already combined your reducers, then just provide reducers instead of combineReducers.
Regards,
Rafael
Please find below code for the solution:
const thunkMiddleware = require('redux-thunk').default;
const store = createStore(reducer, applyMiddleware(thunkMiddleware));
Simply add .default to the createStore function and solve the error Middleware is not a function.
I was trying to add logger to the list of middleware only in development but messed up the import and received the same error. To fix my issue, I needed to add .default to the require():
const middleware = []
if (process.env.NODE_ENV === 'development') {
middleware.push(require('redux-logger').default)
}
In my case i was calling middleware function before the store method
I just had the same problem, what #anisur-rahman suggested above worked for me. I just made the change from applyMiddleware(logger) to applyMiddleware(logger.default). I hope this helps and many thanks to #anisur-rahman for the solution.