Take input value from submit form and store in redux store to use later

user_17348011 0
Viewed 1650

I'm doing a project where the first screen is a simple input to put the name on, and then it goes to another screen (another component) where I need to use the value that the user put in the input earlier to show custom content. I tried to do it with Redux but I'm having difficulties to store the input value in the Redux Store and then use that value in another component. I would like to know how I could store this value and then use it in another component (I honestly have no idea how to do it). If anyone wants, I can also show the other component code.

my first component (where user puts his name):

import React, {useState, useEffect} from "react";
import "../_assets/signup.css";
import "../_assets/App.css";
import { Link } from 'react-router-dom';
    
function Signup() {
  const [name, setName] = useState('')
  const [buttonGrey, setButtonGrey] = useState('#cccccc')
    
  useEffect(() => {
    if(name!== '') {
      setButtonGrey("black")
    } else {
      setButtonGrey('#cccccc')
    }
  }, [name])
    
  const handleSubmitForm= (e) => {
    e.preventDefault()
    store.dispatch({
      type: 'SAVE_USER',
      payload: name,
    })
    console.log({name})
  }
    
  const handleChangeName = (text) => {
    setName(text)
  }
    
  return (
    <div className="container">
      <div className="LoginBox">
        <form onSubmit={handleSubmitForm}>
          <h2>Welcome to codeleap network</h2>
          <text>Please enter your username</text>
          <input
            type="text" 
            name="name" 
            value={name} 
            onChange = {e => handleChangeName(e.target.value)} 
            placeholder="Jane Doe" 
          />
          <div className="button">
            <Link to="/main">
              <button 
                type="submit" 
                style={{backgroundColor: buttonGrey}} 
                disabled={!name} 
              >
                ENTER
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
}
    
export default Signup;

my store.js:

import { createStore } from 'redux';
        
const reducer = (state= (''), action) => {
  switch(action.type) {
    case 'SAVE_USER': {
      state = {...state, name: action.payload}
    }
    default: return state
  }
}
        
const store = createStore(reducer)
            
export {store}

Heading

enter image description here

react-redux redux react-hooks reactjs javascript
1 Answers

First, I suggest using Redux-Toolkit. It makes standing up and configuring a React redux store almost too easy.

Here's the quick-start guide

  1. Create/convert to a state slice. When you create a slice you are declaring the name of the slice of state, the actions, and the reducer functions at the same time all at once.

    import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "user",
  initialState: "",
  reducers: {
    saveUser: (state, action) => action.payload
  }
});

  2. Create and configure the store.

    import { configureStore } from "@reduxjs/toolkit";
import userSlice from "../path/to/userSlice";

const store = configureStore({
  reducer: {
    user: userSlice.reducer
  }
});

  3. Render a Provider and pass the store prop.

    import { Provider } from "react-redux";

<Provider store={store}>
  ... app component ...
</Provider>

From here it's a matter of importing the dispatch function and selecting state, use useDispatch and useSelector from react-redux for this.

Signup

import { useDispatch } from "react-redux";

function Signup() {
  const dispatch = useDispatch(); // <-- dispatch function
  const navigate = useNavigate();

  const [name, setName] = useState("");

  const handleSubmitForm = (e) => {
    e.preventDefault();
    dispatch(userSlice.actions.saveUser(name)); // <-- dispatch the action
    navigate("/main");
  };

  const handleChangeName = (text) => {
    setName(text);
  };

  return (
    ...
  );
}

Example Main component:

import { useSelector } from "react-redux";

const Main = () => {
  const user = useSelector((state) => state.user); // <-- select the user state

  return (
    <>
      <h1>Main</h1>
      <div>User: {user}</div>
    </>
  );
};

Edit take-input-value-from-submit-form-and-store-in-redux-store-to-use-later

user_86908570
Related