Redux状态值应在何处调用setState？React Native状态同步咨询

嘿，作为React Native和Redux的新手，你碰到的这个同步全局状态和组件本地状态的问题，真的是入门阶段超常见的困惑！我来给你掰扯清楚，一步步来～

首先得明确：Redux是全局状态管理工具，用来存储跨组件共享的数据；而组件的本地状态（setState/useState）是用来管理组件内部临时数据的，比如表单输入的实时内容。

像你这个编辑aboutMe的场景，最合理的做法是：

• 初始化时把Redux里的服务器数据同步到组件本地状态
• 用户编辑时，实时更新本地状态（输入更流畅，不会频繁触发Redux全局更新）
• 用户提交时，把本地状态的值同步到Redux，再通过API更新服务器

下面分类组件和函数组件两种情况给你示例：

类组件版本 #

import React from 'react';
import { TextInput, Button } from 'react-native';
import { connect } from 'react-redux';

class ProfileEdit extends React.Component {
  // 初始化时直接用Redux的aboutMe赋值本地状态
  state = {
    localAboutMe: this.props.aboutMe
  };

  // 当Redux的aboutMe发生变化时（比如其他组件修改了全局状态），同步到本地
  componentDidUpdate(prevProps) {
    if (prevProps.aboutMe !== this.props.aboutMe) {
      this.setState({ localAboutMe: this.props.aboutMe });
    }
  }

  // 实时更新本地输入状态
  handleChangeText = (text) => {
    this.setState({ localAboutMe: text });
  };

  // 提交时同步到Redux和服务器
  handleSubmit = () => {
    // 先dispatch action更新Redux状态
    this.props.updateAboutMe(this.state.localAboutMe);
    // 这里还需要调用API把数据发送到服务器，通常结合Redux中间件（比如redux-thunk）实现异步逻辑
  };

  render() {
    return (
      <>
        <TextInput
          value={this.state.localAboutMe}
          onChangeText={this.handleChangeText}
          placeholder="Tell us about yourself"
          multiline
        />
        <Button title="Save Changes" onPress={this.handleSubmit} />
      </>
    );
  }
}

// 你已经写好的mapStateToProps
const mapStateToProps = (state) => {
  return { aboutMe: state.aboutMe };
};

// 新增mapDispatchToProps，绑定更新action
const mapDispatchToProps = (dispatch) => {
  return {
    updateAboutMe: (text) => dispatch({ type: 'UPDATE_ABOUT_ME', payload: text })
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ProfileEdit);

函数组件版本（React Hooks） #

现在更推荐用Hooks写法，代码更简洁：

import { useState, useEffect } from 'react';
import { TextInput, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';

const ProfileEdit = () => {
  // 从Redux获取全局状态
  const aboutMe = useSelector(state => state.aboutMe);
  const dispatch = useDispatch();
  
  // 初始化本地状态，用Redux的值赋值
  const [localAboutMe, setLocalAboutMe] = useState(aboutMe);

  // 监听Redux的aboutMe变化，同步到本地状态
  useEffect(() => {
    setLocalAboutMe(aboutMe);
  }, [aboutMe]); // 依赖项是Redux的aboutMe，只有它变化时才执行

  const handleChangeText = (text) => {
    setLocalAboutMe(text);
  };

  const handleSubmit = () => {
    dispatch({ type: 'UPDATE_ABOUT_ME', payload: localAboutMe });
    // 异步更新服务器的逻辑可以写在这里，或者封装成异步action creator
  };

  return (
    <>
      <TextInput
        value={localAboutMe}
        onChangeText={handleChangeText}
        placeholder="Tell us about yourself"
        multiline
      />
      <Button title="Save Changes" onPress={handleSubmit} />
    </>
  );
};

export default ProfileEdit;

你问的“应在何处针对Redux状态值调用setState”，总结下来有两个时机：

1. 组件初始化时：直接用Redux的状态初始化本地状态（像上面示例里的state = { localAboutMe: this.props.aboutMe }或者useState(aboutMe)）
2. Redux状态发生变化时：当其他组件或异步操作更新了Redux的aboutMe，需要在componentDidUpdate（类组件）或useEffect（函数组件）里对比前后值，变化时更新本地状态

⚠️ 重点提醒：绝对不要在render方法里调用setState，这会触发无限重渲染循环！

如果你的场景很简单，不需要本地临时状态，也可以直接把TextInput的value绑定到Redux状态，输入时直接更新Redux：

const ProfileEdit = () => {
  const aboutMe = useSelector(state => state.aboutMe);
  const dispatch = useDispatch();

  const handleChangeText = (text) => {
    dispatch({ type: 'UPDATE_ABOUT_ME', payload: text });
    // 这里可以直接调用API更新服务器，用redux-thunk处理异步
  };

  return (
    <TextInput
      value={aboutMe}
      onChangeText={handleChangeText}
      placeholder="Tell us about yourself"
      multiline
    />
  );
};

这种方式的缺点是每次输入都会触发Redux全局状态更新，性能稍差，但简单场景下完全可用。

如果要把修改后的aboutMe同步到服务器，通常用Redux中间件（比如redux-thunk）写异步action：

// 异步action creator
export const updateAboutMe = (text) => async (dispatch) => {
  try {
    // 调用你的API更新服务器
    await fetch('https://your-api-url/profile', {
      method: 'POST',
      body: JSON.stringify({ aboutMe: text }),
      headers: { 'Content-Type': 'application/json' }
    });
    // 服务器更新成功后，更新Redux状态
    dispatch({ type: 'UPDATE_ABOUT_ME_SUCCESS', payload: text });
  } catch (error) {
    // 处理错误
    dispatch({ type: 'UPDATE_ABOUT_ME_FAILURE', payload: error.message });
  }
};

// 组件里调用
const handleSubmit = () => {
  dispatch(updateAboutMe(localAboutMe));
};

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