Redux 状态发生变化，但当我回到屏幕时组件不会重新渲染

Question

我有两个屏幕，A 和 B。它们都使用相同的全局状态

<Text style={Styles.textScoreHeader}>{this.props.profleInfos.Points}</Text>

使用这个：

const mapStateToProps = (state) => {
  return {
    folder: state.account.folder,
    theme: state.account.theme,
    whichAccount: state.account.whichAccount,
    profleInfos: state.account.profleInfos,
  };
};
export default connect(mapStateToProps)(ScreenA);

屏幕A 和：

const mapStateToProps = (state) => {
  return {
    folder: state.account.folder,
    theme: state.account.theme,
    whichAccount: state.account.whichAccount,
    profleInfos: state.account.profleInfos,
  };
};
export default connect(mapStateToProps)(ScreenB);

对于屏幕 B。

在屏幕 A 中，我单击一个按钮转到屏幕 B，我在其中更改 profleInfos.Points 全局状态，如下所示：

_Transaction(folder, apiName, code) {
  Transaction(folder, apiName, code).then(data => {
    if (data.success) {
      var theProfleInfos = this.props.profleInfos 
      theProfleInfos.Points = data.LoyPoints //changing profleInfos.Points
      const actionProfileInfos = { type: "SET_PROFILE_INFOS", value: theProfleInfos }
      this.props.dispatch(actionProfileInfos) // dispatch the action
    }
    this.setState({ scanningResponse: data, isLoading: false })
  })
};

我使用this.props.dispatch(actionProfileInfos)而不是mapdispatchtoprops（告诉我是否必须这样做，但我更喜欢这种方法）。
在此屏幕 (B) 中，我显示 this.props.profleInfos.Points 并且它工作正常（扫描后值发生变化）但是当我返回屏幕 A（后退按钮）时 this.props.profleInfos.Points 不刷新。

PS。我在抽屉里有相同的值，如果我打开抽屉我可以看到相同值的变化，可能是因为我 'open' 抽屉

Answer 1

我能够在屏幕 A 中使用 useFocusEffect 解决问题：这个 link 帮助了我 see the class component part

这是我的代码：

   import { useFocusEffect } from '@react-navigation/native';

function Reloader({ api }) {
  useFocusEffect(
    React.useCallback(() => {
      api();
    }, [])
  );
  return null;
}

// ...

class ScreenA extends React.Component {
  // ...

  _getProfileInfo(folder, apiName, LoyPhone, LoyRef, LoyCardNum) {
    getPeintreInfo(folder, apiName, LoyPhone, LoyRef, LoyCardNum).then(data => {
      const actionProfileInfos = { type: "SET_PROFILE_INFOS", value: data }
      this.props.dispatch(actionProfileInfos)
    })
  }

  render() {
    return (
        <>
        <Reloader
          api={() => this._getProfileInfo(this.props.folder, 'GetProfileInfos.php', 'empty', 1, 'empty') />
            {/* rest of ScreenA component */ }
        </>
      );
    }
  }

Redux 状态发生变化，但当我回到屏幕时组件不会重新渲染

Redux state change but the component don't re render whene I back to the screen

javascript

global-state

reactjs

react-native

redux