Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';
import { createStore } from 'redux'
import rootReducer from './features/reducers'
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
const store = createStore(rootReducer)
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
But i get the error in the title when i have it like this. here is the folder structure
BoxReducer.js file contains the following code.
import { boxConstants } from '../constants/BoxConstants';
export function boxes(state = {}, action) {
switch (action.type) {
case boxConstants.GET_BOXES_SUCCESS:
return {
items: action.boxes
};
case boxConstants.GET_BOXES_FAILURE:
return {
error: action.error
};
default:
return state
}
}
Might be here i do something wrong. i just have a hard time to understand were the rootreducer comes from. From what i read it comes from Redux itself and is not something i need to create
According to the folder structure features/reducers has a file named BoxReducer.js. Please try: import rootReducer from './features/reducers/BoxReducer.js'.
or if you want to keep
import rootReducer from './features/reducers' then please rename the file BoxReducer.js to index.js
If this also doesn't work then look into the BoxReducer.js file. If rootReducer module is not exported by default then add curly brackets around rootReducer, like {rootReducer} while importing.
You can try these ways. Thank you.
You need to specify the BoxReducer.js also in the import.
import rootReducer from './features/reducers/BoxReducer.js';
Related
I am trying to configure redux with my react app. While configuring rootReducer I am facing this error:
Module not found: Error: Can't resolve './reducers'
Here is my code:
import React from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import { configureStore } from '#reduxjs/toolkit';
const store = configureStore({ reducer: rootReducer })
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
Here is my folder structure and files screenshot
https://ibb.co/ZVbLh9S
What am I missing?
Thanks in Advance.
It seems like there is no file called reducers.js. But you have a usersSlice.js - are you taking things from multiple different tutorials here? In that case, please follow only one, from start to end, preferrably the official tutorial.
As for your problems - assuming this is your store.js and your userSlice.js contains export default slice.reducer, do the following:
import usersReducer from './usersSlice';
// ....
const store = configureStore({
reducer: {
users: usersReducer
}
})
i dont know why its showing me an error
i not even started the coding yet
i just writtened a configureStore syntax given by documentation
and i uploaded into index.js file via provider
here is my app .js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<h1>Redux Tool Kit</h1>
</div>
);
}
export default App;
here is my store ,js
import { configureStore } from '#reduxjs/toolkit'
const store = configureStore({
reducer: {},
})
export default store;
here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from 'react-redux'
import store from './store/store'
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode >
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
and result is
error
store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
You haven't defined any reducer function in your app
import { configureStore,createSlice } from '#reduxjs/toolkit';
const reducerSlice = createSlice({
name: 'store',
initialState: {},
reducers: {
someAction: function() {
}
}
})
const store = configureStore({
reducer: {
someReducer: reducerSlice.reducer,
}
})
export default store;
You can also create multiple slices/reducers in your app and use combineReducers and pass it to reducer object in configureStore
NOTE: combineReducer is also available as an import from
#reduxjs/toolkit
I started using redux and just to test things out i started using combineReducers for more structured approach of designing things out ,but it doesn't work the same as everyone suggested.I have been scratching my head out that what's wrong in my approach as i followed every points that's on their official website.
index.js
import React from 'react';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reducer from './reducer';
import Welcome from './Components/Welcome';
const store=createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
<Welcome/>
</Provider>,
document.getElementById('root')
);
Welcome.js file
import React from 'react'
import {connect} from 'react-redux';
import {FIRST} from '../Actions';
function Welcome({count,dispatch}) {
dispatch({type:FIRST});
return (
<div>
<h1> Wow it's great {count}</h1>
</div>
)
}
const mapStateToProps=(store) =>({
count:store.count
})
export default connect(mapStateToProps)(Welcome);
loginsearch.js
import {FIRST} from './Actions';
const initialstore={
count:1,
total:1
}
function loginreducer(state=initialstore,action)
{
if(action.type === FIRST)
{
return{...state,count:0};
}
return state;
}
export default loginreducer;
searchreducer.js
const initialstore={
item:1,
search:1
}
function searchreducer(state=initialstore,action)
{
return state;
}
export default searchreducer;
reducer.js
import {combineReducers} from 'redux';
import loginreducer from './loginreducer';
import searchreducer from './searchreducer';
export default combineReducers({
loginreducer,
searchreducer
})
and when i console.log(count) in Welcome.js after dispatch({type:FIRST})
i get undefined ,however in application i should get Wow it's great 0
The problem is, you combined the reducers, but when calling the state from mapStateToProps, you forgot to add which reducer you are actually referring, so you get undefined.
I added keys to your reducers, so it can be much easier to call outside. And updated the mapStateToProps
Here is the example to fix your issue,
/*reducer.js*/
import {combineReducers} from 'redux';
import loginreducer from './loginreducer';
import searchreducer from './searchreducer';
export default combineReducers({
lr: loginreducer, // <== Check this line
sr: searchreducer // <== Check this line
})
/*welcome.js*/
const mapStateToProps=(store) =>({
count:store.lr.count, // <== Check this line
})
export default connect(mapStateToProps)(Welcome);
After updating most packages in my react project, I can no longer figure out what changed to make redux-persist work when using connected-react-router (updated from react-redux-router which is now deprecated).
I've tried looking at guides online but none seem to integrate redux-persist with connected-react-router. How would I go about using the new connected-react-router with a setup like this?
package versions:
├── connected-react-router#6.6.0
├── react#16.12.0
├── react-redux#6.0.1
└── redux-persist#6.0.0
src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { PersistGate } from 'redux-persist/integration/react'
import createHistory from 'history/createBrowserHistory'
import { ConnectedRouter } from 'connected-react-router'
import { Provider } from 'react-redux'
import configureStore from './store'
const history = createHistory();
const store = configureStore(history);
ReactDOM.render((
<Provider store={store}>
<ConnectedRouter history={history}>
<App/>
</ConnectedRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
src/store.js:
import { applyMiddleware, createStore, compose } from 'redux'
import { createFilter } from 'redux-persist-transform-filter';
import { persistReducer, persistStore } from 'redux-persist'
import { routerMiddleware } from 'connected-react-router'
import thunk from "redux-thunk";
import storage from 'redux-persist/lib/storage'
import apiMiddleware from './middleware';
import rootReducer from './reducers'
import createRootReducer from './reducers'
export default (history) => {
const persistedFilter = createFilter(
'auth', ['access', 'refresh']
);
const reducer = persistReducer(
{
key: 'root',
storage: storage,
whitelist: ['auth', 'user', 'game'],
transforms: [ persistedFilter]
},
rootReducer
);
const store = createStore(
createRootReducer(history), {},
compose(
applyMiddleware(thunk, apiMiddleware, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f,
),
);
persistStore(store);
return store;
}
src/reducers/index.js:
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import auth, * as fromAuth from './auth'
import { reducer as form } from 'redux-form';
const createRootReducer = (history) => combineReducers({
router: connectRouter(history),
auth: auth,
// other reducer stuff
});
export default createRootReducer
One thing to check, it could have something to do with PersistGate?
In your src/index.js, you are importing PersistGate, but not using it.
import { PersistGate } from 'redux-persist/integration/react'
Try using it by wrapping your root component with PersistGate. i.e. like this.
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<ConnectedRouter history={history}>
<App/>
</ConnectedRouter>
</PersistGate>
</Provider>
To do that, you'll need access to persistor which is something you'll need to define when you call persistStore(store). i.e. some minor refactoring of your src/store.js will be required.
Further information about this is found in the doc for redux-persist. It says...
If you are using react, wrap your root component with PersistGate. This delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux.
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.