从提交表单中获取输入值并存储在 redux store 中以备后用

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

Create/convert 到状态切片。当你创建一个切片时，你是在声明状态切片的名称，动作，和 reducer 同时运行。

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

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

创建和配置商店。

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

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

渲染一个 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>
    </>
  );
};

从提交表单中获取输入值并存储在 redux store 中以备后用

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

javascript

reactjs

redux

react-redux

react-hooks

标题