React Native中更新成功后设置isSuccessful变量更新UI，是否需在mapDispatchToProps中操作？

嘿，作为React Native新手，你的问题其实很典型，我来一步步帮你理清～

首先明确说：不需要在mapDispatchToProps里实现这个逻辑！mapDispatchToProps的作用只是把Redux的action creators绑定到组件props上，让你能在组件里调用它们，状态更新的逻辑应该放在Redux的reducer里，或者用组件内部的局部状态来处理。

下面给你两种常见的实现方案，你可以根据自己的需求选：

方案一：用Redux全局状态管理（适合需要全局共享这个状态的场景） #

你的editProfileRequest action应该对应三种状态：请求发起中、请求成功、请求失败。我们需要在reducer里监听这些action，来更新isSuccessful状态：

1. 编写Profile Reducer #

// 初始状态
const initialState = {
  profile: {},
  isSuccessful: false, // 用来标记是否更新成功
  loading: false,
  error: null
};

function profileReducer(state = initialState, action) {
  switch(action.type) {
    // 请求发起时，重置成功状态，标记加载中
    case 'EDIT_PROFILE_REQUEST':
      return { ...state, loading: true, isSuccessful: false };
    // 请求成功时，更新profile数据，设置isSuccessful为true
    case 'EDIT_PROFILE_SUCCESS':
      return { 
        ...state, 
        loading: false, 
        profile: action.payload, // 服务器返回的更新后的数据
        isSuccessful: true 
      };
    // 请求失败时，重置成功状态，记录错误信息
    case 'EDIT_PROFILE_FAILURE':
      return { ...state, loading: false, error: action.payload, isSuccessful: false };
    // 用来重置成功状态（比如几秒后隐藏成功提示）
    case 'RESET_SUCCESS_STATUS':
      return { ...state, isSuccessful: false };
    default:
      return state;
  }
}

2. 在组件中获取并使用isSuccessful #

首先在mapStateToProps里把这个状态取出来：

function mapStateToProps(state) {
  return {
    profile: state.profile.profile,
    isSuccessful: state.profile.isSuccessful,
    // 其他你需要的状态
  };
}

然后在组件里监听isSuccessful的变化，显示成功提示并自动重置状态：

// 假设你用的是函数组件，用useEffect监听
useEffect(() => {
  if (props.isSuccessful) {
    // 这里可以显示成功UI，比如Alert或者自定义提示框
    Alert.alert('提示', '资料已成功更新！');
    // 3秒后重置成功状态，避免一直显示提示
    setTimeout(() => {
      props.dispatch({ type: 'RESET_SUCCESS_STATUS' });
    }, 3000);
  }
}, [props.isSuccessful]);

方案二：用组件内部局部状态（适合临时UI提示，不需要全局共享的场景） #

如果isSuccessful只是用来临时显示成功提示，不需要全局其他组件用到，那直接用React的useState会更简单，不用修改Redux的reducer：

import { useState, useEffect } from 'react';
import { Alert } from 'react-native';

function WrappedAccountController(props) {
  const [isSuccessful, setIsSuccessful] = useState(false);

  // 处理编辑资料的函数
  const handleEditProfile = async (profileData) => {
    try {
      // 调用props里的editProfile方法
      await props.editProfile(profileData);
      // 请求成功后设置isSuccessful为true
      setIsSuccessful(true);
    } catch (error) {
      // 处理请求失败的情况
      Alert.alert('错误', '资料更新失败，请重试');
    }
  };

  // 监听isSuccessful变化，自动重置状态
  useEffect(() => {
    if (isSuccessful) {
      Alert.alert('提示', '资料已成功更新！');
      setTimeout(() => setIsSuccessful(false), 3000);
    }
  }, [isSuccessful]);

  // 然后在render里根据isSuccessful来渲染UI，比如显示一个成功标签
  return (
    <View>
      {/* 你的其他组件内容 */}
      {isSuccessful && <Text style={{color: 'green'}}>资料已成功更新！</Text>}
      <Button onPress={() => handleEditProfile(/* 你的资料数据 */)} title="保存资料" />
    </View>
  );
}

最后再强调一下 #

mapDispatchToProps的职责很单一：就是把Redux的action creators绑定到组件props上，让你能在组件里调用它们。状态更新的逻辑（比如设置isSuccessful）属于状态管理的范畴，要么放在Redux reducer里管理全局状态，要么用组件内部的useState管理局部临时状态，不要放到mapDispatchToProps里哦～

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