如何通过表单input标签更新Redux的Reducer状态？

我来帮你搞定把Input值同步到Redux的问题～你的现有代码已经搭好了基础框架，但还缺几个关键步骤，我一步步给你修正：

1. 修复Reducer，让它能响应Action #

你的当前Reducer只是固定返回初始值，完全没处理Add Name这个Action，得改成能根据Action类型更新state的纯函数：

export default function nameReducer(state = { firstName: "" }, action) {
  switch(action.type) {
    case 'Add Name':
      // 必须返回新的state对象，不能直接修改原state
      return {
        ...state,
        firstName: action.text
      };
    default:
      // 没有匹配的Action时返回原state
      return state;
  }
}

2. 在React组件中连接Redux并处理Input事件 #

假设你的App.js是要使用input的组件，需要用react-redux的connect方法把组件和Redux Store关联起来，同时处理input的输入事件：

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addName } from './actions/nameActions'; // 导入你的Action创建函数

function App(props) {
  // 用本地状态管理input的实时输入值（也可以直接在onChange里dispatch，但本地状态更直观）
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    // 触发Action，把输入值传给Redux Store
    props.addName(value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleInputChange} 
        placeholder="请输入名字"
      />
      {/* 实时显示Redux中存储的名字 */}
      <p>Redux中保存的名字：{props.firstName}</p>
    </div>
  );
}

// 把Redux的state映射到组件的props，让组件能拿到存储的数据
const mapStateToProps = (state) => {
  return {
    firstName: state.firstName
  };
};

// 把Action创建函数映射到组件props，方便组件直接调用
export default connect(mapStateToProps, { addName })(App);

3. 确认Store创建与Provider包裹 #

你的index.js已经导入了必要模块，确保Store创建正确并通过Provider包裹整个应用：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import rootReducer from "./reducers/name";
import { createStore } from "redux";
import { Provider } from "react-redux";
import registerServiceWorker from './registerServiceWorker'; // 补全正确路径

// 创建Redux Store
const store = createStore(rootReducer);

ReactDOM.render(
  // 用Provider把App包裹起来，让所有子组件都能访问到Store
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

registerServiceWorker();

这样调整后，当你在input中输入内容时，handleInputChange会触发addName Action，Reducer接收到Action后更新state，组件通过connect拿到最新的state并实时渲染出来。

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