如何将对象添加到 Redux 减速器中？

Question

I'm using Redux with Next JS, and i'm trying to add array of objects to it. in my app i have a form with multiple inputs. to create this multiple input i've created an input form of 10.

{homeAmeneties.map((home) => {
    <div className="h-8 flex justify-end  rounded-md pr-10">
                    <input
                      type="number"
                      onInput={(event) =>
                        (event.target.value = event.target.value.slice(
                          0,
                          event.target.maxLength
                        ))
                      }
                      maxLength="3"
                      onChange={(e) => updateVal(e, home.name)}
                      className="border-[1px] w-1/2  border-black rounded-md h-full focus:outline-none px-2"
                    />
                  </div>
})}

each of the values from the input is added to an array. but i wanted to add it into redux array. in my redux reducer i've created

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

const initialState = {
  arr: []
}

export const arrSlice = createSlice({
  name: "arrS",
  initialState,
  reducers: {
    setArr: (state, action) => {
      state.arr = [...state.arr, action.payload];
    }
  }
});

//...rest here

when i run this it throws TypeError: action.payload is not iterable , i've tried to add it just by passing as state.arr = action.payload; and it doesn't store the input as array of objects, just simple object.

How can i add and make tweeks like i can do it in simple useState?

the code below is what i did with regular useState()

 const [amen, setAmen] = useState([]);

const updateVal = (e, type) => {
    setAmen((prevAmen) => {
      const newAmen = [...prevAmen]; // create a copy of the current state
      const index = newAmen.findIndex((item) => item.name === type); // find the index of the object with the matching name
      if (e.target.value === "") {
        if (index !== -1) {
          newAmen.splice(index, 1);
        }
      } else {
        if (index !== -1) {
          newAmen[index] = { name: type, val: e.target.value }; // update the object at that index
        } else {
          newAmen.push({ name: type, val: e.target.value }); // add a new object to the array
        }
      }
      return newAmen;
    });
    dispatch(setRooms(...amen));
    console.log(rooms);
  };

Answer 1

I found an answer to this if anyone wants a solution. before that let me explain what it does.

i have an array of objects that's coming from an input fields. and when these fields value changes it trigger the Redux dispatch. if the array exists it updates that array if not, well it creates new array.

the data i have is something like below

[
  {name: "name1" , val: 27},
  {name: "name2" , val: 26},
  {name: "name3" , val: 25},
  {name: "name4" , val: 24},
  {name: "name5" , val: 23},
  {name: "name6" , val: 22},
]

and when input onChange() triggers, it dispatch the data to redux. onChange={(e) => handleChange(name, e.target.value)}

const handleChange = (name, val) =>{
  const obj = { name: name, val: val };
  dispatch(setUser(obj))
}

and in the reducer

setUser: (state, action) => {
      const newState = [...state.users];
      const type = action.payload;

      const index = newState.findIndex((item) => item.name === type.name);

      if (type.val === "") {
        if (index !== -1) {
          newState.splice(index, 1);
        }
      } else {
        if (index !== -1) {
          newState[index] = { name: type.name, val: type.val };
        } else {
          newState.push({ name: type.name, val: type.val });
        }
      }

      state.users = [...newState];
      console.log(state.users);
    },

hopefully this helps someone.