首次使用Redux：如何将组件内部状态传递至全局状态？

刚接触Redux的时候这种状态转移的问题确实容易懵，我当初也踩过不少坑，咱们一步步来把你的ComponentOne里的number状态移到Redux全局状态中～

1. 先明确Redux的核心逻辑 #

简单来说，Redux的数据流是：组件触发Action → Reducer根据Action更新全局State → 组件从全局State获取最新值。咱们照着这个流程来改代码。

2. 定义Action（告诉Redux要做什么） #

首先要创建Action类型和Action创建函数，Action就是Redux里的“指令”，告诉它要更新哪个状态、更新成什么值。

// 先定义一个Action类型常量，避免拼写错误
const UPDATE_NUMBER = 'UPDATE_NUMBER';

// 创建Action的函数，返回包含类型和数据的对象
export const updateNumber = (value) => ({
  type: UPDATE_NUMBER,
  payload: value // payload就是要更新的数据
});

3. 编写Reducer（处理状态更新） #

Reducer是纯函数，它接收当前的全局状态和Action，返回新的状态。相当于Redux里的“处理者”，根据指令更新状态。

// 全局状态的初始值，和你组件里的初始state一致
const initialState = {
  number: 0
};

// Reducer函数
export const numberReducer = (state = initialState, action) => {
  switch(action.type) {
    // 匹配到UPDATE_NUMBER类型的Action，就更新number
    case UPDATE_NUMBER:
      return {
        ...state, // 解构原状态，避免直接修改原对象
        number: action.payload
      };
    // 默认返回原状态
    default:
      return state;
  }
};

4. 创建并配置Store（全局状态的容器） #

Store是Redux保存全局状态的地方，我们需要把刚才的Reducer整合进去，创建出Store。

import { createStore, combineReducers } from 'redux';
import { numberReducer } from './reducers'; // 假设你的reducer存在这个路径

// 如果以后有多个Reducer，用combineReducers合并成一个根Reducer
const rootReducer = combineReducers({
  numberState: numberReducer // 给这个reducer的状态起个名字，方便后续获取
});

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

5. 用Provider包裹应用（让所有组件能访问Store） #

要让你的React组件能拿到Store里的状态，需要用react-redux提供的Provider组件把整个应用包裹起来，一般在入口文件（比如index.js）里做：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store'; // 导入刚才创建的Store
import App from './App';

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

6. 修改你的ComponentOne组件（连接Redux） #

现在你的组件不需要自己维护number状态了，改成从Redux获取状态，并且通过dispatch Action来更新全局状态：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateNumber } from './actions'; // 导入刚才的Action创建函数

class ComponentOne extends Component {
  handleNumber = (e) => {
    // 不再用setState，而是调用props里的updateNumber来触发Action
    this.props.updateNumber(e.target.value);
  }

  render() {
    // 从props里获取Redux的全局状态
    console.log(this.props.number);
    return (
      <div>
        {/* 把value绑定到Redux的number，确保输入框和全局状态同步 */}
        <input onChange={this.handleNumber} type="number" value={this.props.number} />
      </div>
    );
  }
}

// mapStateToProps：把Redux的全局状态映射到组件的props里
const mapStateToProps = (state) => ({
  number: state.numberState.number // 对应Store里numberState下的number
});

// mapDispatchToProps：把Action创建函数映射到组件的props里
const mapDispatchToProps = {
  updateNumber
};

// 用connect把组件和Redux连接起来
export default connect(mapStateToProps, mapDispatchToProps)(ComponentOne);

关键点总结 #

• 组件不再自己维护number状态，所有状态都交给Redux管理，这样其他组件也能轻松拿到这个值
• connect是react-redux的核心函数，负责把Redux的状态和Action注入到组件的props中
• 永远不要直接修改Redux的状态，必须通过Action和Reducer来更新，这是Redux的核心原则

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