Develop Reference

React-redux Useselector not Working. Cannot read properties of Undefined ('channelId')

I am Creating a React-app and using Reduxjs Toolkit for state management. I am not able to understand why ChannelID and Channelname are undefined here.
Here is the App.js
import { useSelector } from 'react-redux'
import { selectChannelId, selectChannelname } from '../../reduxjs toolkit/appSlice'
const Chats = () => {
const user = JSON.parse(localStorage.getItem("user"))
const data = localStorage.getItem("userData");
const [userData, setUserData] = useState(JSON.parse(localStorage.getItem("userData")))
const ChannelId = useSelector(selectChannelId) // Giving Error Here
const channelName = useSelector(selectChannelname) // Giving Error Here
Here is the appSlice
import { createSlice } from "#reduxjs/toolkit";
export const appSlice = createSlice({
"name":'app',
initialState:{
channelId:null,
channelName:null,
},
reducers:{
setChannelInfo: (state,action)=>{
state.channelId = action.payload.channelId
state.channelName = action.payload.channelName
},
}
})
export const {setChannelInfo}= appSlice.actions
export const selectChannelId = (state) => state.app.channelId
export const selectChannelname = (state) => state.app.channelName
export default appSlice.reducer;
Error Message
Code for Store
import { createStore } from "redux";
import reducers from "./reducers"
const store = createStore(reducers, {}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store;

Use configureStore to create your store, this is "a friendly abstraction over the standard Redux createStore function that adds good defaults to the store setup for a better development experience." quoted from the rtk doc.
For your case it will be as such
import appReducer from './%%WhereYourSliceResides
import { configureStore } from '#reduxjs/toolkit'
export const store = configureStore({
reducer: {
app: appReducer,
},
})
Then the selector will pick up state.app from your store.

Nextjs Redux getState undefined

Hi i have simple project in Nextjs .I want to get the state of redux store but when i am trying to use store.getState it's throwing one error getState of undefined. And I have one simple vinalla javascript file i want to use getState inside that file also .How can i do that.
//store.js
import { useMemo } from "react";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { rootReducer } from "./reducer";
import { exampleInitialState } from "./reducer";
let store;
const persistConfig = {
key: "primary",
storage,
whitelist: ["exampleData", "count"], // place to select which state you want to persist
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
function makeStore(initialState = exampleInitialState) {
return createStore(
persistedReducer,
initialState,
composeWithDevTools(applyMiddleware())
);
}
export const initializeStore = (preloadedState) => {
let _store = store ?? makeStore(preloadedState);
// After navigating to a page with an initial Redux state, merge that state
// with the current state in the store, and create a new store
if (preloadedState && store) {
_store = makeStore({
...store.getState(),
...preloadedState,
});
// Reset the current store
store = undefined;
}
// For SSG and SSR always create a new store
if (typeof window === "undefined") return _store;
// Create the store once in the client
if (!store) store = _store;
return _store;
};
export function useStore(initialState) {
const store = useMemo(() => initializeStore(initialState), [initialState]);
return store;
}
//_app.js
import { useStore } from '../store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'
export default function App({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState)
const persistor = persistStore(store, {}, function () {
persistor.persist()
})
return (
<Provider store={store}>
<PersistGate loading={<div>loading</div>} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
)
}
vinall.js - How can i use store.getState in this file
import React from "react";
import { useStore } from "../store";
function vanilla() {
return <div>i m vanilla js file</div>;
}
export default vanilla;
//Also in this file
import { useStore } from "../store";
function simplejs() {
let state=useStore.getState();
return state.tods;
}

To access your redux store you can import the useSelector hook from react-redux and use it like so:
const yourStateProp = useSelector((state) => state.yourStateProp);

const myPersistReducer = persistReducer(persistConfig **as any**, rootReducer)
const store = createStore(myPersistReducer, applyMiddleware(sagaMiddleware));`
strong text
`It can be asserted that its type is declared for use

Redux persist blacklist deleting reducers?

So I've got a react redux app and using the 'blacklist' parameter to not rehydrate a couple of reducers. However, upon refresh it completely removes the entire reducer rather than them being set to their initial states. The reducers initial states are fine when not using redux persist. This is the index file of the store:
import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers";
import rootSaga from "./sagas";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import hardSet from "redux-persist/lib/stateReconciler/hardSet";
const persistConfig = {
key: "root",
storage,
stateReconciler: hardSet,
blacklist: ["Alerts", "Layout", "JourneyData"]
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middleWares = [sagaMiddleware, thunk];
const store = createStore(
persistedReducer,
composeEnhancers(applyMiddleware(...middleWares, logger))
);
export const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
export default store;

TypeError: Object(...) is not a function - I am lost

INDEX.JS FILE
import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import firebase from '../Firebase/Firebase';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import rootReducer from './reducers';
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
};
const composeEnhancers =
process.env.NODE_ENV === 'development'
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
: compose;
const store = createStore(
rootReducer,
composeEnhancers(
reactReduxFirebase(firebase, rrfConfig),
reduxFirestore(firebase),
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))
)
);
export default store;
I believe my formatting is correct, however, I am lost. Can someone help, please? Below are my two files in my reducers folder.Please feel free to ask any questions you may have, and I will do my best to answer them. I am seriously stuck.
REDUCERS -> AUTHREDUCER.JS
const initialState = {
}
export default(state = initialState, action) => {
return'dhdhdhd';
};
REDUCERS -> INDEX.JS
import {combineReducers} from 'redux';
import { firebaseReducer } from 'react-redux-firebase';
import authReducer from './authReducer';
export default combineReducers({
auth: authReducer,
firebase: firebaseReducer,
});`enter code here`
When running NPM start, I return this error :
"TypeError: Object(...) is not a function" at const store = createStore( .

checkout https://redux.js.org/api/createstore, I believe 2nd argument should be initial state
const initialState = {} // the initial value for your state
const store = createStore(
rootReducer,
initialState, // 2nd argument of createStore is initial state
composeEnhancers(
...
)
);
UPDATED:
checkout http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html#remove-store-enhancer as they have deprecated the enhancer for react-redux-firebase
so
Remove the reactReduxFirebase from the enhancers
Use the ReactReduxFirebaseProvider
const rrfProps = {
...
};
const App = () => (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfConfig}>
...
</ReactReduxFirebaseProvider>
</Provider>
);

Redux - Store doesn't work

I am a novice in Javascript and Redux, and I just created my first app based on this tutorial. I have a problem that the Store absolutely doesn't react to any dispatch call. I don't know if there is an error in the connection between Redux and React or in the store configuration itself.
Could you please help me with this problem?
This is snippes from my actions file where "addTodo" action is defined.
export const ADD_TODO = 'ADD_TODO';
let todoId = 0;
export const addTodo = (text) => ({
type: ADD_TODO,
id: todoId++,
text,
});
Below is my Store configuration.
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers';
import DevTools from '../containers/DevTools';
const enhancer = compose(
applyMiddleware(createLogger),
DevTools.instrument()
);
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
My index file where I try to call a dispatch function with "AddTodo" action creator. Similarly, I call this function in Redux containers, but it doesn't work for both.
import React from 'react';
import { render } from 'react-dom';
import configureStore from './store/configureStore';
import { addTodo } from './actions';
const store = configureStore();
store.subscribe(() =>
console.log(store.getState())
);
store.dispatch(addTodo('test'));
The whole project is placed on Github too. I will be thankful if you help me.

you forgot to invoke createLogger, try
const enhancer = compose(
applyMiddleware(createLogger())
...
);
webpackbin test