Reactjs Redux updating data values from the state/store with an input

Question

I have a state that has multiple users initial State of the reducer

const initialState = [
  {
    id: 1,
   name:"thename",
   lastName: "Lastname"
  },
  {
    id: 2,
   name:"thename",
   lastName: "Lastname"
  },
  {
    id: 3,
   name:"thename",
   lastName: "Lastname"
  },
];

And a component that shows them in a table, and the table has the functionality to update this values. So the thing i want to do is to take this values, make a copy of them to the state of the component and update them with my inputs.

Copying:

const users= useSelector((state) => state.usersReducer);
const [userState, setUserState] = useState(users)
  useEffect(() => {
    setUserState(users); // if the users state from the redux grows
  }, [applicants]);

Mapping to display the data:

{ usersState.map( user=>{
<input onChange={(e) => handleChange(user)} value={user.name} >
})}

and with this handleChange

const handleChange = (data) => {
    setUserState((user) => {
      return [...user.filter((x) => x.id !== data.id), data];
    });
  };

but when I type in the input nothing happen... Because I could have multiple users, i'm mapping through them, I did forms before while learning, and never had this problem where the input doesn't change at all. But never had to do something like this, so i'm in trouble.

ecoplaneteer · Accepted Answer · 2020-10-03 18:34:15Z

2

I have noticed two issues here in your snippet.

This component shouldn't have users as component state.

The selector is approximately equivalent to the mapStateToProps argument to connect conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector). useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

dispatch should be call in handleChange method to update redux state and re-render component

For example:

  const dispatch = useDispatch()

  const handleChange = (e, user) => {
    dispatch({
      type: 'UPDATE_USER',
      data: {
        ...user,
        name: e.target.value
      },
    })

answered Oct 3, 2020 at 18:34

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

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

1 Comment

Unmy_ Over a year ago

This was actually what I ended up doing. After reading @Piyush Rana answer and yours I finally figured out what was the problem. This is the solution to the problem, I was watching the problem in a different way which was wrong. Thank you for the reply, this helps me a lot, and reduced my code a lot too.

Piyush Rana · Accepted Answer · 2020-10-03 17:33:49Z

2

If you wanna update redux state also, you need to call dispatch to update redux state through reducer in handleChange function.

answered Oct 3, 2020 at 17:33

Piyush Rana

6675 silver badges8 bronze badges

1 Comment

Unmy_ Over a year ago

ohh I see, the problem was that I was assigning the state based on the reduxstate that wans't getting update at the same time. Thanks ! this fixed my problem

Collectives™ on Stack Overflow

Reactjs Redux updating data values from the state/store with an input

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related