skip to Main Content

This is the Redux code:

import { configureStore, createSlice } from "@reduxjs/toolkit";

let initialState = {
  name: "",
  password: "",
};

const loginReducer = createSlice({
  name: "login",
  initialState: initialState,
  reducers: {
    nameChanger(state, action) {
      state.name = action.payload;
    },
    passwordChanger(state, action) {
      state.password = action.payload;
    },
  },
});

const store = configureStore({
  reducer: { login: loginReducer.reducer },
});

export const loginAction = loginReducer.actions;
export default store;

The App.js:

import './App.css';
import HomePage from './pages/HomePage';
import Login from './pages/Login';
import store from './redux/Redux-store';
import { Provider } from 'react-redux';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <HomePage />,
    },
    {
      path: '/login',
      element: <Login />,
    }
  ]);

  return (
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  );
}

export default App;

When I try to run the above code it returns caught TypeError: store.getState is not a function.
I have read many articles regarding this topic but none of them solved my problem.
What is the problem and how can I fix it?

2

Answers


  1. You should wrap in index.js file

    eg:

    <Provider store={store}>
      <App/>
    </Provider>
    
    Login or Signup to reply.
  2. <Provider store={store()}>
          <RouterProvider router={router} />
    </Provider>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search