Javascript - I am facing problem in sending array and fetching array through payload in redux toolkit

RamanandGupta
September 1, 2024
49 views
0 votes
2 Answers

I am stuck on this problem trying to dispatch a state update to the store.

This is my productSlice.js

import { createSlice } from "@reduxjs/toolkit"

const initialState = [];

export const productSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    addpica: (state, action) => {
      state.push(action.payload);
    }
  }
})

export const { addpica } = productSlice.actions;

export default productSlice.reducer;

I have added a dispatch in singleproduct.jsx

function abfunction(product) {
  dispatch(addpica(product))
}

...

<button onClick={abfunction}>ADD TO CART</button>

The problem is I have an array with name "product" and I want to send that array as payload with dispatch. I am stuck in this problem for 2 days. I want to send and receive that "product" array.

When sending that dispatch, it’s saying: "state.push is not a function".

Answers

- AravindA
- September 1, 2024 at 4:03 pm
- 0 votes
0
It seems like the issue you’re facing is due to the incorrect initialization of the initialState. The initialState should be an object, not an array, because Redux slices typically manage state as an object to handle multiple properties.
```
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  products: [], // Initialize products as an array within an object
};

export const productSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    addpica: (state, action) => {
      state.products.push(action.payload); // Push the product into the products array
    },
  },
});

export const { addpica } = productSlice.actions;

export default productSlice.reducer;
```
Try this, I think this helps you
Login or Signup to reply.

- DrewReese
- September 1, 2024 at 8:31 pm
- 0 votes
0
Issue

When you pass an onClick handler as such onClick={abfunction} then the onClick event object is what is passed to the callback. The problem is that the onClick event object, named product in abfunction is passed as the action payload, and since there the event object hasn’t any payload property it will be undefined.
```
function abfunction(product) { // onClick event object
  dispatch(addpica(product))   // click event object pass to action
}

...

<button onClick={abfunction}>ADD TO CART</button>
```
```
addpica: (state, action) => {
  state.push(action.payload); // click event has no payload property!!
}
```
Solution Suggestion

Update the UI code to pass the appropriate addpica payload value.

Examples:
- Use an anonymous callback function to pass a product object refernece:
```
function abfunction(product) {
  dispatch(addpica(product));
}

...

<button onClick={() => abfunction(product)}>ADD TO CART</button>
```
- Don’t consume the click event object and pass a product object reference to action:
```
function abfunction() {
  dispatch(addpica(product));
}

...

<button onClick={abfunction}>ADD TO CART</button>
```
Login or Signup to reply.