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();
Related
I have just completed a mobile app using Expo and React native.
In that App, I have used "react-redux," "redux-thunk," and "redux" for Global State Management.
Store creation:
import React from 'react';
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import rootReducer from "./store/reducers/reducers";
import { StyleSheet, SafeAreaView ,StatusBar } from 'react-native';
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
export default function App() {
return (
<Provider store={store}>
<MY COMPONENT/>
</Provider>
);
}
Reducer file using combineReducers:
import { combineReducers } from "redux";
import selectedVessel from "./selectedVessel";
const appReducer = combineReducers({
selectedVessel: selectedVessel,
});
If I don't want to change my code structure, Can I continue this in expo 44 and above?
If I continue this practice, am I stuck in the future?
I am new to React.js and was setting up base project at that I was getting one issue that my routing got changed but component doesn't load. After googling I found that I need to use ConnectedRouter. While setting up ConnectedRouter, I am getting console error: Could not find router reducer in state tree, it must be mounted under "router"
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ConnectedRouter, connectRouter, routerMiddleware } from "connected-react-router";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import loginReducer from "./store/reducers/login";
import { watchLogin} from "./store/sagas";
import { history } from '../src/shared/history';
import { push } from 'react-router-redux';
import './index.css';
import App from './App';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const rootReducer = combineReducers({
login: loginReducer
});
const routersMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, routersMiddleware];
const store = createStore(
connectRouter(history)(rootReducer),
{},
composeEnhancers(applyMiddleware(...middlewares))
);
sagaMiddleware.run(watchLogin);
const app = (
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
For the sake of helping future souls with this issue, it turns out that according to the linked github discussions, that version 5.0 of the history package is causing the issue and downgrading to version 4.10.1 solves the problem for me.
npm install history#4.10.1
https://github.com/ReactTraining/history/issues/803
https://github.com/ReactTraining/history/issues/804
Add router in your reducer with using connectRouter and history
Refer this link
https://www.npmjs.com/package/connected-react-router
import { connectRouter } from 'connected-react-router'
const rootReducer = combineReducers({
login: loginReducer,
router: connectRouter(history),
});
The main issue is the version of the history package, with react-router-dom v5 you need to use history v4 (the latest version of which is 4.10.1) - history v5 is only compatible with react-router-dom v6.
You have forgotten :
router: connectRouter(history),
in your combineReducers()
If you use immutable you should import ConnectedRouter from 'connected-react-router/immutable'.
I ran into the same issue.
I forgot to give the history as a parameter to my rootReducer, in my store initialization.
const store = createStore(
rootReducer(history), // <-- HERE
{},
...
)
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;
}
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.
I have started with react was experimenting something. but I am continuously getting error sating that "Uncaught TypeError: (0 , _reactRedux.combineReducers) is not a function" here is my demo configuration file
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import App from './containers/App'
import promise from "redux-promise-middleware"
import logger from "redux-logger"
import reducer from "./reducers"
const middleware = applyMiddleware(promise(), thunk, logger())
const store= createStore(reducer,middleware)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
this index.js of reducers
import { combineReducers } from "react-redux"
import users from "./UserReducer"
export default combineReducers({
users,
}
)
User reducer.js
export default function reducer(state={users:[]},action){
// console.log("inside reducer")
switch(action.type){
case "FETCH_USERS":{
console.log("inside reducer",{...state})
return {...state,users:action.payload}
}
}
}
combineReducers is provided by the 'redux' package, not 'react-redux'.
So:
import { combineReducers } from 'redux'
should fix it
How about change this
export default combineReducers({
users,
}
)
To this
import { combineReducers } from 'redux'
import users from './users'
const someApp = combineReducers({
users
})
export default someApp
And import it in app.js or index.js where you put your route. Just like this.
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import someApp from './reducers'
import App from './components/App'
let store = createStore(someApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
I had this same problem today but it was working fine before. I was importing combineReducers from 'redux'.
I had just changed the separate reducer functions to use createReducer from '#reduxjs/toolkit' and after that it broke. Changing the code back still did not work so it could be related to adding in extra types for TypeScript.
Strangely, I was able to fix this by importing combineReducers from '#reduxjs/toolkit' instead.