從提交表單中獲取輸入值並存儲在 redux 存儲中以供以后使用

Question

我正在做一個項目，其中第一個屏幕是一個簡單的輸入來放置名稱，然后它轉到另一個屏幕（另一個組件），在那里我需要使用用戶之前輸入的值來顯示自定義內容. 我嘗試使用 Redux 來實現，但是我很難將輸入值存儲在 Redux Store 中，然后在另一個組件中使用該值。 我想知道如何存儲這個值，然后在另一個組件中使用它（老實說，我不知道該怎么做）。 如果有人願意，我還可以顯示其他組件代碼。

我的第一個組件（用戶輸入他的名字的地方）：

    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;

我的 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}

標題

Answer 1

首先，我建議使用Redux-Toolkit 。 它使得建立和配置 React redux 存儲幾乎太容易了。

這是快速入門指南

1. 創建/轉換為狀態切片。 當你創建一個切片時，你同時聲明了狀態切片的名稱、動作和reducer 函數。

    import { createSlice } from "@reduxjs/toolkit"; const userSlice = createSlice({ name: "user", initialState: "", reducers: { saveUser: (state, action) => action.payload } });

2. 創建和配置商店。

    import { configureStore } from "@reduxjs/toolkit"; import userSlice from "../path/to/userSlice"; const store = configureStore({ reducer: { user: userSlice.reducer } });

3. 渲染一個Provider並傳遞store道具。

    import { Provider } from "react-redux"; <Provider store={store}> ... app component ... </Provider>

從這里開始，這是導入dispatch函數和選擇狀態的問題， useDispatch使用react-redux useDispatch和useSelector 。

注冊

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 (
    ...
  );
}

示例主要組件：

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>
    </>
  );
};