Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Usage of payload/action in React-redux reducers

I am currently trying to work through some example code and have the following in two separate slices:

Reducer in slice 1:

incrementQuantity: (state, action) => {
  const { payload: index } = action;

  if (state[index]) {
    if (state[index].name === " Auditorium Hall (Capacity:200)" && state[index].quantity >= 3) {
      return;
    }
    state[index].quantity++;
  }
}

Reducer in slice 2:

toggleMealSelection: (state, action) => {
  state[action.payload].selected = !state[action.payload].selected;
},

I don’t understand the usage of payload/action in either of the above cases.

Can someone provide a simple explanation what is going on with these two different lines:

  • const { payload: index } = action;
  • state[action.payload].selected = !state[action.payload].selected;
Tags:

2

Answers


  1. 0

    Let’s break down the code for each reducer in your Redux slices.

    Reducer slice 1

    state: This represents the current state of your slice. It is typically an array or an object containing various items or data points.

    action: This is the action object dispatched to modify the state. It contains a type (which identifies the action) and a payload (which is the data the action carries).

    payload: index: The code is using destructuring to extract index from action.payload. index is likely an integer representing the position of an item in an array.

    if (state[index]): This checks if there is an item at the given index in the state. If there is, it proceeds to the next condition.

    if (state[index].name === "Auditorium Hall (Capacity:200)" && state[index].quantity >= 3): This condition checks if the item at state[index] has the name "Auditorium Hall (Capacity:200)" and if its quantity is 3 or more. If both conditions are true, the function returns, meaning no further action is taken.

    state[index].quantity++: If the above condition is not met, it increments the quantity property of the item at state[index] by 1.

    Reducer slice 2

    state: This is the current state of your slice, likely an array or object where each item represents a meal or something similar.

    action: The action object that was dispatched, containing a type and payload.

    state[action.payload].selected: Accesses the selected property of the item in state at the index or key specified by action.payload.

    !state[action.payload].selected: This negates the current value of selected, effectively toggling it between true and false.

    Hence,
    state[action.payload].selected = !state[action.payload].selected is just updating the state with new value either true of false.

    If the previous state is true , then new state will be false due to !. It’s just kind of switch /toggle button,working like on/off.

    Login or Signup to reply.
  2. 0 
    const { payload: index } = action;

    This uses Javascript’s Destructuring Assignment to destructure the action payload property and rename it to index.

    It’s similar to const index = action.payload;.

    const action = { payload: 13 };

const { payload: index1 } = action;
const index2 = action.payload;

console.log({ index1, index2 });

    Destructuring assignment is useful when there are several object/array properties/elements you’d like to declare in local scope. Instead of a bunch of const <X> = obj.<X>; statements, you can use a single const { X, Y, Z, ...rest } = obj; statement. It helps keep code more DRY and readable.

    state[action.payload].selected = !state[action.payload].selected;

    This takes the current value stored in state[action.payload].selected and stores the negated truthy/falsey value back into state[action.payload].selected. If state[action.payload].selected is false, then the result is that state[action.payload].selected now is true, and if state[action.payload].selected is true, then the result is that state[action.payload].selected is now false. value =!value is a common pattern to flip a boolean.

    let value = false;

console.log(value); // false
value = !value      // flip false -> true
console.log(value); // true
value = !value      // flip true -> false
console.log(value); // false
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search