从提交表单中获取输入值并存储在 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 存储变得非常容易。

这是quick-start guide

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函数并选择状态，为此使用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>
    </>
  );
};