How remove item from redux state using react hooks

Question

I have a section in which users can change data using input on change, now I want to be able to delete items from the redux state.

Here is the code sand box link : live demo

Reducer

const initialState = {
  firstName: "Kunta ",
  lastName: "Kinte",
  age: 35,
  country: "Ghana",
  IQ: 200
};

const DetailsReducer = (state = initialState, action) => {
  const { name, value } = action;

  return { ...state, [name]: value };
};

export default DetailsReducer;

Here is How I display data and tried to delete the first name but nothing happens

import { useSelector } from "react-redux";

const Details = () => {
  const details = useSelector((state) => state);

  const handleDelete = () => {
    details.firstName = "";
  };

  return (
    <div>
      <h1> Details </h1>
      <span> Firstname : {details.firstName}</span>
      <button onClick={handleDelete}>Delete</button>
      <br />
      <span> LastName : {details.lastName}</span>
      <button>Delete</button>
      <br />
      <span> age : {details.age}</span>
      <button>Delete</button>
      <br />
      <span> country : {details.country}</span>
      <button>Delete</button> <br />
    </div>
  );
};

export default Details;

What is the proper way to delete the item from a redux state like this?

Eduardo Oliveira · Accepted Answer · 2021-04-15 12:09:49Z

1

to change the redux state we need to use the useDispatch hook.

In your case:

import { useSelector, useDispatch } from "react-redux";

const Details = () => {
  const details = useSelector((state) => state);
  const dispatch = useDispatch();
  
  const handleDelete = () => {
    dispatch({
      type: "change",
      name: "firstName",
      value: "",
    });
  }

  ...

You can use, in the reducer, the type property to add various behaviours to the redux state management.

answered Apr 15, 2021 at 12:09

Eduardo Oliveira

1063 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Dead Man Over a year ago

so I will need to do that for each field?

Eduardo Oliveira Over a year ago

Yes, but it's possible add a more generic function, like: const handleDelete = (fieldName) => { dispatch({ type: "change", name: fieldName, value: "" }); and change the onClick events handler to a arrow function: <button onClick={() => handleDelete("firstName")}>Delete</button>. And, for example in other button: <button onClick={() => handleDelete("lastName")}>Delete</button>

Collectives™ on Stack Overflow

How remove item from redux state using react hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related