React-Redux doesn't work

JavaScript
1

Hello. I have a following project - GitHub - VasVV/tinder-clone
There I tried to implement React Redux Toolkit but it doesn’t work as intended.
More specifically, I try to send to Redux store name and password from “SignUp” component:

 const handleSubmit = (event) => {
    //Prevent page reload
    event.preventDefault();

    var { name, password } = document.forms[0];
    dispatch(changeInfo(name, password));
  };

But it doesn’t change my Redux store. What could be wrong?

2

The action creator doesn’t take two arguments. Pass it an object with the two properties/values for the state update.

name and password are not the values, they are the elements. Except name is undefined because that isn’t the value you gave its name attribute.

I would suggest you pass the form element to the FormData constructor and use the getters it provides to get the form input element values. It might be more verbose, but it is cleaner and more declarative.

BTW, RTK comes with Immer so you can “mutate” the state (it isn’t actually doing mutation).

3

Thanks for your reply. I figured out one mistake - the action wasn’t getting dispatched due to <button type='submit' onClick={() => navigate("/signup2")}> .

I moved “navigate” to “handleSubmit” function so now handleSubmit looks like this: const handleSubmit = (event) => { //Prevent page reload event.preventDefault(); dispatch(changeInfo({ userName, password })); navigate("/signup2"); };

The action is getting dispatched but still doesn’t do anything, the state remains in its initial condition. What can be done to fix it?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.