Error in Redux-tookit: The store is missing a valid reducer. Ensure that the argument provided to combineReducers is an object containing reducers as values

Question

Error in Redux-tookit: The store is missing a valid reducer. Ensure that the argument provided to combineReducers is an object containing reducers as values

Uh oh! Looks like there's an error with the Store reducer. The argument passed to combineReducers needs to be an object with valid reducers.

I'm having trouble setting up a Store for my app and I can't figure out where I went wrong. Could someone help me identify the issue and suggest how to resolve it?

store

import { configureStore } from '@reduxjs/toolkit';
import rootReducers from './reducers';

const store = configureStore({
  reducer: rootReducers,
});

export default store;

reducer

import handleCart from './handleCart';
import { combineReducers } from 'redux';

const rootReducers = combineReducers({
  handleCart,
});

export default rootReducers;

const cart = [];

const handleCart = (state = cart, action) => {
  const product = action.payload;
  switch (action.type) {
    case ADDITEM:
      // Check if product already exists
      const exist = state.find(x => x.id === product.id);
      if (exist) {
        return state.map(x =>
          x.id === product.id ? {...x, qty: x.qty + 1} : x,
        );
      } else {
        const product = action.payload;
        return [
          ...state,
          {
            ...product,
            qty: 1,
          },
        ];
      }
      break;
    case REMOVEITEM:
      const exist1 = state.find(x => x.id === product.id);
      if (exist1.qty === 1) {
        return state.filter(x => x.id !== exist1.id);
      } else {
        return state.map(x =>
          x.id === product.id ? {...x, qty: x.qty - 1} : x,
        );
      }
      break;
    default:
      break;
  }
};

javascript redux redux-toolkit

Answer 1

Answer №1

Upon reviewing the handleCart reducer function code, there are a few noticeable issues that may result in exceptions being thrown. One issue is the missing return of state in the default case of the handleCart reducer function. Additionally, the REMOVEITEM case assumes the existence of the variable exist, which could potentially lead to accessing a qty property of an undefined object. It's important to remember that Array.prototype.find returns undefined when no matching element is found in the array.

Ensure that the handleCart is exported as the default so it can be imported to create the root reducer.

const cart = [];

const handleCart = (state = cart, action) => {
  const product = action.payload;

  switch (action.type) {
    case ADDITEM: {
      // Check if product exists
      const exist = state.find(x => x.id === product.id);

      if (exist) {
        return state.map(x =>
          x.id === product.id ? { ...x, qty: x.qty + 1 } : x,
        );
      }
      return [...state, { ...product, qty: 1 }];
    }

    case REMOVEITEM: {
      const exist = state.find(x => x.id === product.id);

      if (exist) {
        // Item exists, update quantity
        if (exist.qty === 1) {
          return state.filter(x => x.id !== exist1.id);
        } else {
          return state.map(x =>
            x.id === product.id ? { ...x, qty: x.qty - 1 } : x,
          );
        }
      }
      // Item didn't exist, just return current state
      return state;
    }

    default:
      // No action required, return current state
      return state;
  }
};

export default handleCart;

Although you are using redux-toolkit, consider creating a state slice. Here's a similar implementation using createSlice. This approach allows for writing reducer functions with mutable updates instead of having to shallow copy all updated parts of the state.

import { createSlice } from '@reduxjs/toolkit';

const initialState = [];

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItem: (state, action) => {
      const product = state.find(product => product.id === action.payload.id);

      if (product) {
        product.qty++;
      } else {
        state.push({ ...action.payload, qty: 1 });
      }
    },
    removeItem: (state, action) => {
      const product = state.find(product => product.id === action.payload.id);

      if (product) {
        product.qty--;
        if (product.qty === 0) {
          state.filter(product => product.id !== action.payload.id);
        }
      }
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;

export default cartSlice.reducer;

Answer 2

Upon reviewing the handleCart reducer function code, there are a few noticeable issues that may result in exceptions being thrown. One issue is the missing return of state in the default case of the handleCart reducer function. Additionally, the REMOVEITEM case assumes the existence of the variable exist, which could potentially lead to accessing a qty property of an undefined object. It's important to remember that Array.prototype.find returns undefined when no matching element is found in the array.

Ensure that the handleCart is exported as the default so it can be imported to create the root reducer.

const cart = [];

const handleCart = (state = cart, action) => {
  const product = action.payload;

  switch (action.type) {
    case ADDITEM: {
      // Check if product exists
      const exist = state.find(x => x.id === product.id);

      if (exist) {
        return state.map(x =>
          x.id === product.id ? { ...x, qty: x.qty + 1 } : x,
        );
      }
      return [...state, { ...product, qty: 1 }];
    }

    case REMOVEITEM: {
      const exist = state.find(x => x.id === product.id);

      if (exist) {
        // Item exists, update quantity
        if (exist.qty === 1) {
          return state.filter(x => x.id !== exist1.id);
        } else {
          return state.map(x =>
            x.id === product.id ? { ...x, qty: x.qty - 1 } : x,
          );
        }
      }
      // Item didn't exist, just return current state
      return state;
    }

    default:
      // No action required, return current state
      return state;
  }
};

export default handleCart;

Although you are using redux-toolkit, consider creating a state slice. Here's a similar implementation using createSlice. This approach allows for writing reducer functions with mutable updates instead of having to shallow copy all updated parts of the state.

import { createSlice } from '@reduxjs/toolkit';

const initialState = [];

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItem: (state, action) => {
      const product = state.find(product => product.id === action.payload.id);

      if (product) {
        product.qty++;
      } else {
        state.push({ ...action.payload, qty: 1 });
      }
    },
    removeItem: (state, action) => {
      const product = state.find(product => product.id === action.payload.id);

      if (product) {
        product.qty--;
        if (product.qty === 0) {
          state.filter(product => product.id !== action.payload.id);
        }
      }
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;

export default cartSlice.reducer;

Error in Redux-tookit: The store is missing a valid reducer. Ensure that the argument provided to combineReducers is an object containing reducers as values

Answer №1

Similar questions

javascript monitoring numerous socket channels for echoes

Angucomplete Alternative solves the challenge of accessing remote URLs

Adding hidden elements with jQuery: A comprehensive guide

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Develop a circular carousel using React JS from scratch, without relying on any third-party library

When JSON contains slashes, JSON.parse will trigger an error

I'm puzzled as to why my createDoorMethod is returning a string value instead of a number, even though I am passing it a number. Can someone help me

What are the potential drawbacks of directly modifying the state in ReactJS?

HtmlWebpackPlugin can cause issues with loading relative path files on websites that are not located in the root directory

Accessing new information seamlessly without the need for page refresh

Struggling with TypeScript and JsObservable? Let us assist you!

An AngularJS-powered dynamic navbar

You can click on the link within the Leaflet Popup to trigger JavaScript functionality

Having Trouble with QR Code Generator Functionality

The AngularJS HTTP interceptor is a crucial component for handling

I encountered an issue while trying to integrate VideoJS with React

Is OnPush Change Detection failing to detect state changes?

Checking the boxes in javascript

Save the retrieved data in a variable and pass the entire JSON object as a prop to a React component

Missing ghost image appears when you drag and drop the file