Store does not have a valid reduce & useSelector returns undefined state

Hello fellas!

Thank you for your help in advance!

I am facing a very odd problem with my React Native app, with my store not accepting the reducers I pass from Slice function. Would appreciate any insight on this!

Edit: Console logs the following error: Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

App.js

import {enableES5} from 'immer';
enableES5();
import AppNavigator from './routes/app.navigator';
import { Provider } from 'react-redux';
import poiReducer from './poistate';
import { configureStore } from '@reduxjs/toolkit';
import { AppRegistry } from 'react-native';


export default function App() {

  AppRegistry.registerComponent('main',() => App);

  const store1 = configureStore({
    reducer: { loc: poiReducer }
  });

  return(
  <Provider store={store1}><AppNavigator/></Provider>
  )

PoiState.js

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";

export const getPoi = createAsyncThunk(
    'poi/getPoi',
    async () => {
        console.log('here');
        const response = await fetch('https://warply.s3.amazonaws.com/data/test_pois.json')
        const format = await response.json();
        return format;
    }

);

export const poiSlice = createSlice({
    name: 'poi',
    initialState:{
        poi:[],
        isLoading: false,
    },
    
    extraReducers:{
        [getPoi.pending]:(state)=>{
            state.isLoading = true;
        },   
        [getPoi.fulfilled]:(state, action)=>{
            state.loc= action.payload;
            state.isLoading = true;
        },
        [getPoi.rejected]:(state)=>{
            state.isLoading = false;
        },
        
    },
});

export default poiSlice.reducer;

[markerikson]

@KrowNFL I think you’ve got multiple problems going on here, unfortunately 😦

• there’s an empty file named poistate in the root . That may be confusing the imports.
• You’re doing export default poiSlice.reducer in poistate.js, which exports just the reducer by itself. That part is good. But:
  • you are doing import poiSlice from './poistate' in App.js, so conceptually the name is wrong - it’s not the “slice object”, it’s the “slice reducer”
  • you have console.log(poiSlice.reducer) in App.js, which isn’t right because you didn’t import the entire slice
  • You have configureStore({reducer: { loc: poiReducer }}), but there isn’t a poiReducer variable in this file because you didn’t give it that name when you imported from poistate
• Per earlier comment, you’re creating the Redux store inside of <App>, which isn’t good

So, tbh you’ve got some very confused code, and none of this is a Redux-specific problem. You’re mismatching import names and variables and values, and none of this is lining up correctly.

I’d recommend looking at the repo I linked above, and using that as a guideline for setting up the project.

[KrowNFL]

Can you post the repo so I can take a quick look?

Certainly

https://github.com/KrowNFL/Warply