How to insert data with post using react redux?

Question

I am learning react-redux, so I am creating a CRUD app for users using JSON placeholder API, now I am able to display data, delete and edit, but I have a problem with adding data.

Here is a live demo in the sandbox : redux live demo

Now when I click add user button I get the following error.

Cannot read property 'editing' of undefined.

Here is my form component to add a user.

import React, { useState } from 'react'
import {useDispatch} from 'react-redux'
import {addUser, addNewUser  } from './redux/acitons/users/Users';

function AddUserForm({ user }) {
    const dispatch = useDispatch();
    const [name, setName ] = useState(user.name);

   const handleSubmit = () =>{
        console.log(name)
        dispatch(addNewUser( {
            ...user, name
        }));
   }

  const handleCancel = () => {
      console.log(user.id);
      dispatch(addUser(user.id))
  }
  return (
    <tr>
      <td>{user.id}</td>
      <td>
        <input
          defaultValue={user.name}
          onChange={e => setName(e.target.value)}
        />
      </td>
      <td>
        <button type="button" className="btn outline" onClick={handleCancel}>
          <i className="material-icons">Cancel</i>
        </button>
        <button
          type="button"
          className="btn btn-success btn-link"
          onClick={handleSubmit}
        >
          <i className="material-icons">save</i>
        </button>
      </td>
    </tr>
  );
}

export default AddUserForm

What do I need to do to solve the problem?, any help or suggestions will be appreciated, the live demo can be found here in the sandboxredux demo

itaydafna · Accepted Answer · 2020-06-12 22:21:58Z

1

Looking at your code - it seems like your app is breaking since you are not passing any user-payload object to theaddUser dispatch call(on User.js line 64).

Here's a possible way to solve this:

Passing a new-user payload object with an id 1 higher than the previous user on the list) and then dispatch an editUser for that new id.

const addNewUser = () => {
    const usersList = userData.users;
    const newUserId = usersList[usersList.length - 1].id + 1;
    addUser({
      id: newUserId
    });
    editUser(newUserId);
  };

This is a very simplified solution (for example - a better approach would be to give a unique id to each user and index the list on the client not based on the server ids) - but it should give you an idea of how to take this forward.

edited Jun 12, 2020 at 22:21

answered Jun 12, 2020 at 21:33

itaydafna

2,0861 gold badge18 silver badges30 bronze badges

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

7 Comments

The Dead Man Over a year ago

hej did u test this on sandbox?

itaydafna Over a year ago

I did. It seems like what you want to pass there is some object which will serve as a payload with the initial properties for a new user (id, placeholder for name, etc.), but even passing an empty object (addUser({})) to addUser will make the code stop breaking.

The Dead Man Over a year ago

I am newbie to redux, that is why I need help here, if u know the solution can you clone the repo and show the solution?

itaydafna Over a year ago

I've updated my answer with a possible simple solution.

itaydafna Over a year ago

I've edited my answer and solution - also dispatching editUser right after addUser gets what you are looking for (I think).

|

Dignity Dignity · Accepted Answer · 2020-06-12 22:06:09Z

0

Well first of all, to temporary handle compile errors put question marks on user?.editing and other places where you use user.id or other parameters. Other thing, I can see that you are using id for editing and deleting so you should also set id property in your userForm

answered Jun 12, 2020 at 22:06

Dignity Dignity

1512 silver badges12 bronze badges

1 Comment

The Dead Man Over a year ago

That is why I need help to understand this well, if u know the naswer , u can clone the repo and show me how its done in a proper way , thanks

Collectives™ on Stack Overflow

How to insert data with post using react redux?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related