import { configureStore } from "#reduxjs/toolkit";
import userReducer from "./userSlice";
export default configureStore({
reducer: {
user: userReducer,
},
});
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<Provider store={store}>
<App />
</Provider>
</Router>
</React.StrictMode>,
document.getElementById("root")
);
The above is how I access the one reducer inside of configureStore.
What if:
export default configureStore({
reducer: {
user: userReducer,
second_reducer: second_reducer,
},
});
how do I access second_reducer?
Something like this
import { useSelector } from 'react-redux'
const state = useSelector((store) => store.second_reducer.state)
Related
I am using react-redux with redux-persist in a react js application with TypeScript.
store.jsx
import {applyMiddleware, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import reducer from '../reducers';
import {composeWithDevTools} from "#redux-devtools/extension";
import {persistReducer, persistStore} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'root',
storage,
whitelist: ['authState']
}
const persistedReducer = persistReducer(persistConfig, reducer)
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(
thunkMiddleware,
))
);
export const persistor =persistStore(store);
export default store;
index.tsx
import App from './App';
import ReactDOM from 'react-dom';
import './utils/chart';
import {BrowserRouter} from 'react-router-dom';
import 'nprogress/nprogress.css';
import {SidebarProvider} from './contexts/SidebarContext';
import {Provider} from "react-redux";
import React from 'react';
import store, {persistor} from '../src/services/store/ConfigureStore';
import {PersistGate} from 'redux-persist/lib/integration/react';
//---------------------------------------------
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<SidebarProvider>
<BrowserRouter>
<App/>
</BrowserRouter>
</SidebarProvider>
</PersistGate>
</Provider> ,
document.getElementById('root')
);
As you can see in the picture below
This PersistGate Showing an Error Like this https://i.stack.imgur.com/ABnOH.jpg
I am trying to learn how to implement redux-persist into my project inorder to persist states in case of user refreshing the page, etc...
After modifying the required files, I have no errors yet my page is just white, nothing renders and I dont understand why..
Here is my code
import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer";
const rootReducer = combineReducers({
token_1: token,
isLoggedIn: isLoggedIn,
userId: userId,
ProcessReducer: ProcessReducer,
img: img,
title: title,
amount: amount,
});
const persistConfig = {
key: "root",
storage,
whitelist: [
"title",
"img",
"token_1",
"isLoggedIn",
"userId",
"ProcessReducer",
"amount",
],
};
export default persistReducer(persistConfig, rootReducer);
export const store = createStore(rootReducer);
export const persistor = persistStore(store);
and
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store,persistor} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
import {PersistGate} from 'redux-persist/integration/react'
ReactDOM.render(
<Provider store={store}>
<Router>
<React.StrictMode>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</React.StrictMode>
</Router>
</Provider>,
document.getElementById('root')
);
I only modified these two files, can someone point me at what am I doing wrong ?
thank you
--- Bellow are my original files
import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer"
const reducers = combineReducers({
token_1: token,
isLoggedIn: isLoggedIn,
userId: userId,
ProcessReducer: ProcessReducer,
img: img,
title:title,
amount:amount
});
export const store = createStore(reducers);
export default store;
and
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Provider store={store}>
<Router>
<React.StrictMode>
<App />
</React.StrictMode>
</Router>
</Provider>,
document.getElementById('root')
);
Your implementation seems to be wrong. Let's review them step by step:
First, create a persistedReducer:
const persistedReducer = persistReducer(persistConfig, rootReducer);
Now, create the store using the persistedReducer (you used the rootReducer to create your store which is not correct)
const store = createStore(persistedReducer);
You create the store, one step forward, you need also a persist store:
const persistor = persistStore(store);
We done here, wrap them all together, and export essentials:
import {createStore} from 'redux';
import {persistStore, persistReducer} from 'redux-persist':
// other codes ...
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
export {store, persistor}
Time to use the store and persistor in the App:
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import {store, persistor} from 'path/to/the/store';
const App = () => (
<Provider store={store}>
<PersistGate persistor={persistor}>
<MyApplication />
</PersistGate>
</Provider>
)
I just migrated to react-router, react-router dom v4.3.1, installed history v4.9. Earlier, all my components which were connected to the store, got router props. Now, they say that there must be a history prop. However, I dont get it anywhere, especially in App component.
Root:
import React, { Component } from "react";
import { Provider } from "react-redux";
// import { BrowserRouter, Route, browserHistory, Switch } from "react-router";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { hot } from 'react-hot-loader'
import { ConnectedRouter } from 'connected-react-router'
import configureStore, {history} from '../store/configureStore'
import App from "./App";
import Startpage from "./startpage";
import PatientSearch from "./routes/patient/patientSearch";
import Technician from "./routes/technician/technician";
import Notes from "./routes/notes/notes";
import DeliveryReports from './routes/admin/deliveryReports/reports'
const store = configureStore(/* provide initial state if any */)
class Root extends Component {
render() {
console.log('propsroot', this.props)
return (
<Provider store={store}>
<ConnectedRouter history={history}>
{/*<Router onUpdate={() => window.scrollTo(0, 0)}>*/}
<App>
<Switch>
<Route exact path="/" component={Startpage} />
<Route
component={PatientSearch}
path="/patient/search"
/>
<Route
component={Technician}
path="/technician"
/>
<Route
component={Notes}
path="/notes"
/>
<Route
component={DeliveryReports}
path="/delivery_reports"
/>
</Switch>
</App>
{/*</Router>*/}
</ConnectedRouter>
</Provider>
);
}
}
export default hot(module)(Root)
ConfigureStore:
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { connectRouter } from 'connected-react-router'
import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';
import { reducer as formReducer } from 'redux-form'
import app from '../reducers/app'
import {createBrowserHistory} from "history";
export const history = createBrowserHistory()
const reducer = combineReducers({...reducers.default, router:connectRouter(history), form:formReducer });
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
promiseMiddleware
)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(
reducer,
initialState,
window.devToolsExtension && window.devToolsExtension()
);
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers/index');
store.replaceReducer(nextRootReducer);
});
}
return store;
}
In App component I render routes with {children} props
The history prop is provided by your provider. To serialize it in you component's props use the withRoute HOC
Am new in reactjs and am developing a small signup functionality with react-redux but am facing this error. I was following a certain tutorial but it seems am stuck right now
Below is my code :
Signup.js
import React, { Component } from 'react';
import NavBar from './subcomponents/NavBar'
import SignUpForm from './subcomponents/SignUpForm'
import { connect } from 'react-redux'
import {userSignUpRequest} from "./actions/signUpActions";
import PropTypes from 'prop-types';
class Signup extends Component {
render() {
const {userSignUpRequest} = this.props;
return (
<div>
<NavBar/>
<SignUpForm userSignUpRequest={userSignUpRequest}/>
</div>
);
}
}
Signup.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
export default connect(null, { userSignUpRequest })(Signup);
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './redux-js/index';
import App from "./App";
import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk";
const store = createStore(
(state = {}) => state,
applyMiddleware(thunk)
);
ReactDOM.render(
<provider store={store}>
<App />
</provider>
, document.getElementById('root'));
Error
Could not find "store" in either the context or props of
"Connect(Signup)". Either wrap the root component in a <Provider>, or
explicitly pass "store" as a prop to "Connect(Signup)"
Solution
You need to import the Provider in your index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './redux-js/index';
import App from "./App";
import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk";
import { Provider } from 'react-redux'; //added
const store = createStore(
(state = {}) => state,
applyMiddleware(thunk)
);
ReactDOM.render(
<Provider store={store}> //fixed typo
<App />
</Provider >
, document.getElementById('root'));
You need to wrap the App component with Provider component imported from 'react-redux'
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
I'm incorporating redux-persist into my react app, and am getting the following error:
TypeError: this.props.persistor.subscribe is not a function
I am following the same documentation described in the following link: https://www.npmjs.com/package/redux-persist
store.js
import {applyMiddleware,createStore,combineReducers} from "redux"
import {createLogger} from "redux-logger"
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
import reducer from "./Reducers"
const middleware = applyMiddleware(promise(),thunk,createLogger())
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, reducer)
export default () => {
let store = createStore(persistedReducer,middleware)
let persistor = persistStore(store)
return { store, persistor }
}.js:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux'
import store from "./store"
import persistor from "./store"
import { PersistGate } from 'redux-persist/integration/react'
ReactDOM.render(
<PersistGate loading={null} persistor={persistor}>
<Provider store={store}>
<MuiThemeProvider>
<App />
</MuiThemeProvider>
</Provider>
</PersistGate>,
document.getElementById('root'));
registerServiceWorker();
import {store, persistor} from 'your-store-module' is definitely the correct import syntax.
I suggest double checking your export statements and paths.
Just export your store and persitor like this:
export default {store, persistor};
Then on you reducer import it like this (where the store and persistor are defined):
import Store from 'yourModuleName'
Lastly, call your persistor and store and put PersistGate inside the Provider like this:
<Provider store={Store.store}>
<PersistGate loading={null} persistor={Store.persistor}>
<MuiThemeProvider>
<App />
</MuiThemeProvider>
</PersistGate>,
</Provider>