UseSelector returns me undefined

Asked
Active3 hr before
Viewed126 times

6 Answers

useselectorreturnsundefined
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Please be sure to answer the question. Provide details and share your research!,Join Stack Overflow to learn, share knowledge, and build your career., How many iterations to reach the sequence?

Finally I resolved the issue, It is weird but I changed nothing, what I did, I created an index.js file inside my reducers folder for combining all the reducer files (I only had one in this case but still) and then exported that and it worked !

import {
   combineReducers
} from "redux";
import {
   postsReducer
} from "./posts";

const allReducers = combineReducers({
   postsReducer
});

export default allReducers;
load more v
88%

I've been at this for a while and I can't figure it out.,When I dispatch my populateDatasets action I can see that my store gets updated just fine in dev tools, but when I try to to access that state in a React component with useSelector it always returns undefined.,Again, my store updates just fine when I dispatch the action, but 'datasets' is always undefined. Any help would be much appreciated.,Here is how I've configured my store

Here is how I've configured my store

import {
   configureStore
} from '@reduxjs/toolkit'
import datasetReducer from './datasets'

export default configureStore({
   reducer: {
      datasets: datasetReducer
   },
   devTools: true
})

Here is the slice that I've created for this piece of state

import {
   createSlice
} from '@reduxjs/toolkit'

export const datasetSlice = createSlice({
   name: 'datasets',
   initialState: [],
   reducers: {
      populateDataset: (state, action) => {
         state.push(action.payload)
      }
   }
})

export const {
   populateDataset
} = datasetSlice.actions

export default datasetSlice.reducer

And here is where I dispatch the action in my React component

const App = () => {
  const { datasets } = useSelector((state) => state.datasets)
  console.log('datasets: ' + datasets)
  const dispatch = useDispatch()

  useEffect(() => {
    csv(FantraxHQData).then(data => {
      data.map((player) => {
        player.isDrafted = false
        return player
      })
      dispatch(populateDataset(data))
    })
    
    csv(FantasyProsData).then(data => {
      data.map((player) => {
        player.isDrafted = false
        return player
      })
      dispatch(populateDataset(data))
    })
  }, [])

  return (
    <div className={styles.outter}>
      <MyTeam />
      <div className={styles.container}>
        <DataButtons />
        <DraftBoard />
      </div>
    </div>
  )
}
load more v
72%

I am using redux-orm for a react project. But, I can't figure out this error:, The text was updated successfully, but these errors were encountered: ,Successfully merging a pull request may close this issue.,formDefinitionSelectors.js

useSelector.js: 38 Uncaught TypeError: Cannot read property 'session' of undefined
at memoize.js: 189
at index.jsx: 68
at useSelectorWithStoreAndSubscription(useSelector.js: 29)
at useSelector2(useSelector.js: 106)
at App(index.jsx: 68)
at renderWithHooks(react - dom.development.js: 14985)
at mountIndeterminateComponent(react - dom.development.js: 17811)
at beginWork(react - dom.development.js: 19049)
at HTMLUnknownElement.callCallback2(react - dom.development.js: 3945)
at Object.invokeGuardedCallbackDev(react - dom.development.js: 3994)
load more v
65%

I have a testRender utility which wraps the render method from @testing-library/react. It lets me pass in a store instance, and will wrap the rendered UI with a react-redux provider for that store.,Or would it be best to leave useDispatch do it's thing (if you have testing library wrapped in a Provider) and just mock the action creator?,When the store contains the state I need, I call the testRender method with the store...,In every test case I will instantiate a new store and build the state I need by dispatching actions.

I ran into the same issue and the reason is because I tried to mock useDispatch:

import {
   Provider,
   useDispatch
} from 'react-redux';
jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
}));

It nullifies all other react-redux imports, so Provider becomes undefined.
Changing the mock to below solves the issue:

jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: jest.fn()
}));
load more v
75%

because it returns undefined. Guess the real question would be how I transform this,function mapStateToProps({ queryFilter, favourites }) {,the same code in case the writing isn’t clear.,Also, a photo of the code in case it doesnt get clear

const favValues = useSelector(favourites => favourites.favValues);
load more v
40%

For any action that is not recognized, it must return the state given to it as the first argument.,If the state given to it is undefined, it must return the initial state for this specific reducer. According to the previous rule, the initial state must not be undefined either. It is handy to specify it with ES6 optional arguments syntax, but you can also explicitly check the first argument for being undefined.,It must never return undefined. It is too easy to do this by mistake via an early return statement, so combineReducers throws if you do that instead of letting the error manifest itself somewhere else.,As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state.

rootReducer = combineReducers({
   potato: potatoReducer,
   tomato: tomatoReducer
}) // This would produce the following state object{  potato: {    // ... potatoes, and other state managed by the potatoReducer ...  },  tomato: {    // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...  }}
load more v

Other "useselector-returns" queries related to "UseSelector returns me undefined"