We Keep Coding

Unable to access REDUX State in multple Pages and Components

I need some help figuring this issue out. After setting up Redux store and reducer in my app, I was able to successfully log and render updated state upon click in one, but not multiple pages. Below are steps and code sample:
Step1:
I installed Redux and wrapped the store around my entire app
// _app.js
import Layout from '../components/Layout';
import { SessionProvider } from 'next-auth/react';
import store from '../store';
import { Provider } from 'react-redux';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
<>
<Provider store={store}>
<SessionProvider session={session}>
<Layout>
<Component {...pageProps} />
<ToastContainer />
</Layout>
</SessionProvider>
</Provider>
</>
);
}
export default MyApp;
Step 2:
Setup an instance of a slice, Store and reducer
// mySlice.js
import { createSlice} from '#reduxjs/toolkit';
const initialState = {
user: {
role: ""
},
};
export const userStatusSlice = createSlice({
name: 'userStatus',
initialState,
reducers: {
userInfo: (state, action) => {
state.user.role = action.payload.role; // only this value comes from payload onClick
},
},
});
// Action creators are generated for each case reducer function
export const { userInfo } = userStatusSlice.actions;
export default userStatusSlice.reducer;
Step 3: Store...
//store.js
import { configureStore } from '#reduxjs/toolkit';
import userStatusSlice from './slices/userSlice/userStatus';
export default configureStore({
reducer: {
userStatus: userStatusSlice,
},
});
Step 4: Setup pages and React Hook useSelector, and tried accessing dispatched actions set as state variables in multiple pages. On one page I was able to fetch the data successfully, but not on the other page(s)
//First Page
import { useSession, getSession } from 'next-auth/react';
import { useSelector } from 'react-redux';
const firstPage = () => {
const { data: session } = useSession();
const { role } = useSelector((state) => state.userStatus.user);
console.log(role); // There is role successfully logged to the console
return (
<>
</>
);
};
export default firstPage;
//Second page.js
import { useSession } from 'next-auth/react';
import { useSelector } from 'react-redux';
const secondPage = () => {
const { data: session } = useSession();
const { role } = useSelector((state) => state.userStatus.user);
console.log(role) // There is NO role - why?
return (
<>
</>
);
};
export default secondPage;
I appreciate all input to help resolving this issue. Thanks in advance

How to dispatch an action from inside getInitialProps?

I am trying to implement Redux in a Next.js app and have problems getting the dispatch function to work in getInitialProps. The store is returned as undefined for some reason that I cannot figure out. I am using next-redux-wrapper. I have followed the documentation on next-redux-wrapper GitHub page but somewhere on the way it goes wrong. I know the code is working - I used axios to directly fetch the artPieces and then it worked just fine but I want to use Redux instead. I am changing an react/express.js app to a Next.js app where I will use the API for the basic server operations needed. This is just a small blog app.
Here is my store.js:
import { createStore } from 'redux';
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
// create your reducer
const reducer = (state = { tick: 'init' }, action) => {
switch (action.type) {
case HYDRATE:
return { ...state, ...action.payload };
case 'TICK':
return { ...state, tick: action.payload };
default:
return state;
}
};
// create a makeStore function
const makeStore = (context) => createStore(reducer);
// export an assembled wrapper
export const wrapper = createWrapper(makeStore, { debug: true });
And here is the _app.js:
import './styles/globals.css';
import { wrapper } from '../store';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default wrapper.withRedux(MyApp);
And finally here is where it does not work. Trying to call dispatch on the context to a sub component to _app.js:
import React from 'react';
import { ArtPiecesContainer } from './../components/ArtPiecesContainer';
import { useDispatch } from 'react-redux';
import axios from 'axios';
import { getArtPieces } from '../reducers';
const Art = ({ data, error }) => {
return (
<>
<ArtPiecesContainer artPieces={data} />
</>
);
};
export default Art;
Art.getInitialProps = async ({ ctx }) => {
await ctx.dispatch(getArtPieces());
console.log('DATA FROM GETARTPIECES', data);
return { data: ctx.getState() };
};

This should probably work with "next-redux-wrapper": "^7.0.5"
_app.js
import { wrapper } from '../store'
import React from 'react';
import App from 'next/app';
class MyApp extends App {
static getInitialProps = wrapper.getInitialAppProps(store => async ({Component, ctx}) => {
return {
pageProps: {
// Call page-level getInitialProps
// DON'T FORGET TO PROVIDE STORE TO PAGE
...(Component.getInitialProps ? await Component.getInitialProps({...ctx, store}) : {}),
// Some custom thing for all pages
pathname: ctx.pathname,
},
};
});
render() {
const {Component, pageProps} = this.props;
return (
<Component {...pageProps} />
);
}
}
export default wrapper.withRedux(MyApp);
and Index.js
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { END } from 'redux-saga'
import { wrapper } from '../store'
import { loadData, startClock, tickClock } from '../actions'
import Page from '../components/page'
const Index = () => {
const dispatch = useDispatch()
useEffect(() => {
dispatch(startClock())
}, [dispatch])
return <Page title="Index Page" linkTo="/other" NavigateTo="Other Page" />
}
Index.getInitialProps = wrapper.getInitialPageProps(store => async (props) => {
store.dispatch(tickClock(false))
if (!store.getState().placeholderData) {
store.dispatch(loadData())
store.dispatch(END)
}
await store.sagaTask.toPromise()
});
export default Index
For the rest of the code you can refer to nextjs/examples/with-redux-saga, but now that I'm posting this answer they're using the older version on next-redux-wrapper ( version 6 ).

Mobx store in react doesn't rerender components

I'm trying to understand mobx. After annotations caused a lot of trouble, I decided to use a global store as described here. My store looks like this:
import {
makeObservable,
observable,
action
} from "mobx";
class Store {
constructor() {
makeObservable(this, {
fetchWorkouts: action,
user: observable,
allWorkouts: observable,
selectedWorkout: observable,
currentStep: observable,
setUser: action
})
}
user = {
uid: null,
email: null,
name: null
}
allWorkouts = []
selectedWorkout = {}
currentStep = 0
fetchWorkouts() {
}
setUser(newUser) {
this.user = newUser;
}
}
const store = new Store()
export default store;
My new user comes directly from the login, which looks like this:
import {Button} from "semantic-ui-react";
import {useHistory} from "react-router-dom"
import React from 'react';
import store from "../../context/Store";
import {toJS} from "mobx";
export default function SubmitLogin(props) {
let history = useHistory();
// eslint-disable-next-line react-hooks/exhaustive-deps
const loginUser = async () => {
let bodyObj = {
email: props.email,
pw: props.password
}
let queryString = "http://localhost:3001/user/login/" + bodyObj.email + "/" + bodyObj.pw;
await fetch(queryString).then(response => response.json()).then(json => store.setUser(json)).then(() => console.log(toJS(store.user))).then(() => history.push("/"));
}
return (
<>
<Button className={"loginRegisterButton"} onClick={loginUser}>Submit</Button>
</>
)
}
To test everything, I am trying to display the uid in my header like this:
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import store from "../context/Store";
class Toolbar extends Component {
render() {
return (
<div id={"toolbarDiv"}>
<p style={{color: "white"}}>{store.user.uid}</p>
</div>
);
}
}
export default Toolbar
However, even after I receive the uid from my server and can print it in my login component, I assume that the data gets correctly assigned to the user variable in the store. Unfortunately, after pressing the sign in button and getting redirected to "/", there is nothing in the toolbar. How can I access the variables correctly?

I think you still need to wrap Toolbar and SubmitLogin in an observer call:
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import { observer } from "react-mobx";
import store from "../context/Store";
class Toolbar extends Component {
render() {
return (
<div id={"toolbarDiv"}>
<p style={{color: "white"}}>{store.user.uid}</p>
</div>
);
}
}
export default observer(Toolbar);
Ref: https://mobx.js.org/react-integration.html

React-Redux connect isn't getting store from Provider

Im using Redux with React Native to manage state. I believe that I've successfully set up the store and Provider. I can use store.getState() and store.dispatch(action()) from any component successfully, however, the react-redux connect function is not allowing me to access the store from child components. Can you find anything wrong with my code below?
Login.js - This child component I'm testing won't access redux store with react-redux connect.
import React, {Component} from 'react';
import actions from '../../redux/actions';
import {connect} from 'react-redux';
const mapStateToProps = state => {
// To test if this function fires, which it is not
console.log('login state mapping through redux');
return {
state: state,
};
};
const dispatchToProps = dispatch => {
return {
userRecieved: (user) => dispatch(actions.userRecieved(user)),
};
};
export class Login extends Component {
constructor(){
super();
this.state = {
credentials: {
email: '',
password: '',
},
};
}
componentDidMount(){
// This will show whether redux is connected
console.log(this.props.state);
this.props.userRecieved('TEST USER');
}
render() {
return ( <Text>{this.props.state}</Text> );
}
}
export default connect(mapStateToProps, dispatchToProps)(Login);
App.js
import React, {Component} from 'react';
import YEET from './src/YEET.js';
import store from './src/redux/stores/index';
import {Provider} from 'react-redux';
export default class App extends Component {
render() {
return (
<Provider store={store}>
<YEET />
</Provider>
);
}
}
My Redux Files:
store.js
import { combineReducers, createStore} from 'redux';
import accountReducer from '../reducers/accountReducer';
import postReducer from '../reducers/postReducer';
const initialState = {};
const reducers = combineReducers({
account: accountReducer,
post: postReducer,
});
const store = createStore(reducers, initialState);
export default store;
actions.js
import constants from '../constants';
var userRecieved = user => ({
type: constants.USER_RECIEVED,
data: user,
});
export default {
userRecieved,
};
accountReducer.js
import constants from '../constants';
var initialState = {
user: {
photos: [],
},
};
export default (state = initialState, action ) => {
let newState = Object.assign({}, state);
switch (action.type) {
case constants.USER_RECIEVED:
const user = {
id: action.data.uid,
// photos: action.data,
};
console.log(action);
newState.user = user;
return newState;
default:
return state;
}
};

From what I see, the only reason could be that you're importing the unconnected component.
When you import the Login component, make sure that you import the default export instead of the named export.
So, wherever you import the Login component, do it like this:
import Login from 'your-login-component-location/Login'
instead of
import { Login } from 'your-login-component-location/Login'
The second one is a named export, which will return the Login class directly.
The first one is the default export, which will return the connected component.

Dispatching Socket.io API response to React Components using Redux

I'm receiving the data, but the issue is I'm only able to access it inside of the same file api.js. As I can tell, it's not returning any value. I did a lot of variations of this code snippets. It's either returning the initial state or undefined. The interesting thing is, if there is an error, it would fill out the error object. Sorry for so much code, but can someone please help me to successfully implement socket.io with React/ Redux.
This is what I got so far:
api.js
Here I'm successfully connecting to the API, receiving the data, but I'm not able to use it outside of this file. If a return an object it will be undefined, but if I console.log it or even return a console.log and use the file in other component/ file, the data will show up in my console, but only that way, and only in my console ... can't dispatch the data, and re-use it all over the app that I'm trying to build.
import axios from 'axios';
import io from "socket.io-client";
export function fetchData() {
const configUrl = 'API endpoint';
axios.get(configUrl).then(res => {
const socketUrl = res.data.config.liveDistributionSSL;
const socket = io(socketUrl);
socket.on('connect', function () {
socket.emit('subscribe', {
subscribeMode: 'topSportBets',
language: {
default: 'en'
},
deliveryPlatform: 'WebSubscribe',
playerUuid: null,
subscribeOptions: {
autoSubscribe: true,
betCount: 3,
excludeMeta: false,
resubscriptions: 0,
fullBetMeta: true,
browser: {}
}
});
let relevantData = {}; // Object that I'm trying to assign values to and return
socket.on('message', async (message) => {
switch (message.type) {
case 'state': // We have all the data needed to show
relevantData = await Object.values(Object.values(message.data)[9]);
break;
case 'currentMatches':
// We have matches to update
console.log('Matches =>', message.contentEncoding);
break;
case 'betchange':
// We have match bets to update
console.log('Match bets =>', message.contentEncoding);
break;
default: break;
}
return relevantData;
});
socket.on("disconnect", () => console.log("Client disconnected"));
});
});
}
actions/index.js
This is my main action creator. The code you're seeing was my last attempt to try out a new approach, still the same result.
import { GET_DATA, GET_ERROR } from './types';
import { fetchData } from '../api'
export const getDataAsync = () => async dispatch => {
try {
const response = await fetchData();
dispatch({ type: GET_DATA, payload: response });
} catch (e) {
dispatch({ type: GET_ERROR, payload: 'Something went wrong ', e });
}
};
reducers/data_reducer.js
Here I'm making a simple reducer and depending on the payload change the initial state
import { GET_DATA, GET_ERROR } from '../actions/types';
const INITIAL_STATE = {
apiData: {},
errorMessage: {}
};
const dataReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_DATA:
return { ...state, apiData: action.payload };
case GET_ERROR:
return { ...state, errorMessage: action.payload };
default:
return state;
}
}
export default dataReducer;
reducers/root_reducer.js
Here I'm combining the reducers and later on implement my root_reducer to my store configuration
import { combineReducers } from 'redux';
import dataReducer from './data_reducer';
const rootReducer = combineReducers({
allData: dataReducer
});
export default rootReducer;
PrimaryLayoutContainer.js
*This would be my main layout container where I'm implementing routing, display the PrimaryLayout component, and where **I'm trying to pass down the values ass props*
import React, { Component } from 'react';
import {connect} from 'react-redux';
import PrimaryLayout from "../components/PrimaryLayout";
import { withRouter } from 'react-router'
import * as myData from '../actions';
class PrimaryLayoutContainerComponent extends Component {
render() {
return (
<div>
<PrimaryLayout history={this.props.history}
allData={this.props.allData}
/>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
allData: state.allData
}
}
export default withRouter(connect(mapStateToProps, myData)(PrimaryLayoutContainerComponent));
PrimaryLayout.js
Where I'm trying to implement the data, all of the routing, and display main components, etc, but here I stopped because I'm not getting the needed data
import React, {Component} from 'react';
import {Switch, Route, Redirect, Link} from 'react-router-dom';
import Favorites from './Favorites';
... a lot of other imports of my components
class PrimaryLayout extends Component {
constructor(props) {
super(props);
this.state = {
currentRoute: '',
// data: {}
}
}
componentWillReceiveProps(nextProps) {
this.setState({
currentRoute: nextProps.history.location.pathname
})
}
componentWillMount() {
this.setState({
currentRoute: this.props.history.location.pathname
})
}
componentDidMount() {
console.log(this.props); // Where i'm trying to get access to the data
}
render() {
const {currentRoute} = this.state;
return (
<div className='main-nav'>
<nav className="topnav">
<ul>
<li className={currentRoute === "/favorites" ? "active" : ""}>
<Link to="/favorites"><div className='star'></div> Favorites </Link> </li>
<li className={currentRoute === "/football" ? "active" : ""}>
<Link to="/football"><div className='football'></div> Football </Link> </li>
<li className={currentRoute === "/basketball" ? "active" : ""}>
<Link to="/basketball"><div className='basketball'></div> Basketball </Link> </li>
<li className={currentRoute === "/tennis" ? "active" : ""}>
<Link to="/tennis"><div className='tennis'></div> Tennis </Link> </li>
<li className={currentRoute === "/baseball" ? "active" : ""}>
<Link to="/baseball"><div className='baseball'></div> Baseball </Link> </li>
<li className={currentRoute === "/waterpolo" ? "active" : ""}>
<Link to="/waterpolo"><div className='waterpolo'></div> Waterpolo </Link> </li>
</ul>
</nav>
<main>
<Switch>
<Route path='/favorites' component={Favorites} />
<Route path='/football' component={Football} />
<Route path='/basketball' component={Basketball} />
<Route path='/tennis' component={Tennis} />
<Route path='/baseball' component={Baseball} />
<Route path='/waterpolo' component={Waterpolo} />
<Route path='/volleyball' component={Volleyball} />
<Route path='/handball' component={Handball} />
<Route path='/formula1' component={Formula} />
<Redirect to="/football"/>
</Switch>
</main>
</div>
)
}
}
export default PrimaryLayout;
index.js
This would be my main index.js file where I'm configuring the store and rendering elements to the DOM
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './assets/styles/App.css';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/root_reducer';
import thunk from 'redux-thunk';
function configureStore() {
return createStore(
rootReducer,
applyMiddleware(thunk)
);
}
const myStore = configureStore();
ReactDOM.render(
<Provider store={myStore}>
<App />
</Provider>,
document.getElementById('root')
)
NOTE:
Like I said before, I'm successfully connecting to the API endpoint, receiving the necessary data, but I can only manipulate it inside of the same file api.js. I Google all day long, but I didn't find anything relevant to my issue. There's a lot of examples with PHP, Java, but not so much with React, Redux, etc ... I never used Socket.io before, so please my dear friends, help me ... :/
The main question here is:
How can I successfully implement Scoket.io and use Redux to dispatch the API data throw out all of my main React components, instead of doing it very DRY, meaning implement the same logic in every component, and every time to get all of the data, instead of only the relevant one.
If I can do it in one place (outside of the api.js file) I can do it everywhere, and that answer is more than appreciated and will be accepted immediately.

I changed the api.js file. the async - await was causing problems, plus the return statement was in the wrong place. A rookie mistake.
import axios from 'axios';
import io from "socket.io-client";
export const fetchData = () => {
let apiData = {}; // Object that I'm trying to assign values to and return
apiData.bets = [];
apiData.matches = [];
const configUrl = 'API URI';
axios.get(configUrl).then(res => {
const socketUrl = res.data.config.liveDistributionSSL;
const socket = io(socketUrl);
socket.on('connect', function () {
socket.emit('subscribe', {
subscribeMode: 'topSportBets',
language: {
default: 'en'
},
deliveryPlatform: 'WebSubscribe',
playerUuid: null,
subscribeOptions: {
autoSubscribe: true,
betCount: 3,
excludeMeta: false,
resubscriptions: 0,
fullBetMeta: true,
browser: {}
}
});
socket.on('message', (message) => {
switch (message.type) {
case 'state': // We have all the data needed to show
apiData.bets = Object.assign(message.data.bets);
apiData.matches = Object.assign(message.data.matches);
break;
// ... etc ...
default: break;
}
});
socket.on("disconnect", () => console.log("Client disconnected"));
});
});
return apiData;
}
After that, I implemented a better store configuration. I actually made an external file for it, three to be exact, depending on the development progress (dev, stage, prod). Here is the configureStore.dev.js file:
import thunk from 'redux-thunk';
import {
createStore,
applyMiddleware,
compose
} from 'redux';
import rootReducer from '../reducers/root_reducer';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
export default function configureStore(initialState) {
return createStore(
rootReducer,
compose(
applyMiddleware(thunk, reduxImmutableStateInvariant()),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
}
And finally what I did to make it all work, I changed the PrimaryLayoutContainerComponent.js to look like this. And with all that simple, but important changes I was able to access all the relevant data as its being updated in real-time throughout the entire app.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PrimaryLayout from "../components/PrimaryLayout";
import { withRouter } from 'react-router'
import * as myData from '../actions';
// Since this is our Primary Layout Container here we in addition to mapping state to props also
// are dispatching our props and binding our action creators, also using 'withRouter' HOC
// to get access to the history object’s properties and make it easy to navigate through our app.
class PrimaryLayoutContainerComponent extends Component {
render() {
return (
<div>
<PrimaryLayout history={this.props.history}
allData={this.props.allData}
getDataAsync={this.props.actions.getDataAsync}
/>
</div>
)
}
}
const mapStateToProps = (state) => {
return {allData: state.allData.apiData}
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators({...myData}, dispatch)
};
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PrimaryLayoutContainerComponent));
A little sidenote: I always answer my own questions instead of just deleting them with n I find the resolution myself. I do that for the simple fact that it might help someone in the future.