如何将表单提交的输入值存入Redux store并在其他组件中使用

问题修复步骤 #

1. 修正store.js代码 #

你的reducer存在两个问题：初始值定义为字符串但后续按对象操作，SAVE_USER分支没有主动返回新状态，会直接走default返回旧值。
修正后的代码：

import { createStore } from 'redux';

// 初始state改成对象结构，方便后续扩展其他字段
const initialState = {
  name: ''
}
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SAVE_USER': 
      // 匹配到类型直接返回新state，不要直接修改原state
      return {...state, name: action.payload}
    default: 
      return state
  }
}

const store = createStore(reducer)
export {store}

2. 给根组件挂载Redux Provider #

在你的入口文件（一般是index.js）中引入Provider和store，包裹整个应用，这样所有组件都能访问store：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store'; // 按你的实际路径调整
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

3. 修正Signup组件代码 #

现有问题：没有引入dispatch方法，按钮外包裹Link会导致跳转优先级高于dispatch，可能出现状态还没存就跳转的问题。
修正后的代码：

import React, {useState, useEffect} from "react";
import "../_assets/signup.css";
import "../_assets/App.css";
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

function Signup() {
  const [name, setName] = useState('')
  const [buttonGrey, setButtonGrey] = useState('#cccccc')
  const dispatch = useDispatch()
  const navigate = useNavigate()

  useEffect(() => {
    if(name!== '') {
      setButtonGrey("black")
    } else {
      setButtonGrey('#cccccc')
    }
  }, [name])

  const handleSubmitForm= (e) => {
    e.preventDefault()
    // 先存用户名到redux
    dispatch({
      type: 'SAVE_USER',
      payload: name,
    })
    // 存完再跳转到目标页
    navigate('/main')
  }

  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">
            <button 
              type="submit" 
              style={{backgroundColor: buttonGrey}} 
              disabled={!name} 
            >
              ENTER
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Signup;

4. 在其他组件获取存储的用户名 #

在你需要展示用户名的组件（比如/main路径对应的组件），用useSelector读取store里的name字段即可：

import React from 'react';
import { useSelector } from 'react-redux';

function MainPage() {
  // 从store中取出用户名
  const userName = useSelector(state => state.name)

  return (
    <div>
      <h1>你好，{userName}</h1>
      {/* 其他自定义内容 */}
    </div>
  )
}

export default MainPage;

内容的提问来源于stack exchange，提问作者Heitor Kenzou