ReactNative 无限导航页面的状态管理

项目使用的主要框架:

  • React-native 0.61.5
  • React-redux 7.1.3
  • React-navigation 4.2.2
  • Dva 2.0.2

问题

RN项目中遇到了无限向下导航的场景,类似汽车之家论坛,帖子明细画面点击某个用户的头像,进入其动态画面再点击他的帖子,又进入帖子详情画面,再点击其他用户头像,又进入他人动态画面....

无限向下导航,即A-->B-->C-->B-->C-->B-->C...;每次画面B或画面C出现时,显示的内容不同(根据ID从接口查询数据),但画面结构都是一样的。

如果不集成Redux/Dva这种状态管理,应该是没问题的,因为状态是和画面实例绑定的,每次画面B出现时,是不同的画面实例。

如果集成了Redux/Dva状态管理工具,则画面B的所有实例状态都被绑定在Redux中了,后一个画面B的数据加载,会影响前一个画面B的页面显示(返回的时候)!Model如下:

const defaultState = {
  loading: true,
  userId: null,
  userInfo: null,
  activites: [],
};
export default {
  namespace: 'profile',
  state: {...defaultState},
  reducers: {
    updateState(state, {payload}) {
      let obj = {...state, ...payload};
      return obj;
    },
    ...
  },
  effects: {
    *reset({payload = {}}, {call, put, select}) {
      yield put(createAction('updateState')({...defaultState}));
    },
    ...
  },
};

解决方法

区分开每次画面B加载时,保存在Redux中的状态,上面profile的model中的状态要改为

state: {
  user0: {...defaultState},
  user1: {...defaultState},
  // ...
},

相当于画面B在Redux中的state多了一个层级,sub state的key为“user” + ID,这样每次画面B出现时,就增加了一个sub state,这样就不会影响前一个画面B了。

另外,ID这个状态值要维护在画面B的实例里,画面B的实例根据这个ID去Redux中查找对应的全部状态。

@connect(({profile}) => ({...profile}))
class UserProfile extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      // 当前画面实例的state key
      stateKey:'user0',
    };
  }
  
  componentDidMount() {
    const {dispatch, navigation} = this.props;
    let {user_id} = navigation.state.params;
    let stateKey = "user" + user_id;
    this.setState({stateKey});
    // 之后每次action,都要带上sub state key,否则不知道要更新哪个画面的状态
    dispatch(createAction('profile/index')({forceRefresh: true, stateKey}));
  }
}
export default UserProfile;

参考:

https://stackoverflow.com/questions/55211289/stack-same-screen-multiple-times-with-react-navigation

https://stackoverflow.com/questions/49865165/redux-nested-state-with-dynamic-key

https://stackoverflow.com/questions/40023091/react-native-redux-multiple-instances-of-same-state-in-app