android - react native -Redux : Multiple instances of same state in app

Question

我是 React Native 的新手。我正在为我的 react native 应用程序使用 redux 架构，但是由于 redux 的全局存储状态，我遇到了问题。

假设，例如，在应用程序中前进时，我正在如下导航。

返回导航时，

根据 redux 架构，它正在将导航堆栈中存在的每个页面实例的状态更改为商店中的最新状态。

这里是上面例子的代码，

Page.js [组件]

class Page extends Component{

    componentWillMount(){

    }

    render(){
        var {image,apiCall} = this.props;

        return (
        <View>
            <Image Source={{uri:image}} style={{// style for the image}}>
        </View> 
    )}

    componentDidMount(){
        this.props.apiCall(this.props.route.data.link);   // this.props.route.data.link -> this is just a link for                                                  // the apiCall
    }

    componentWillReceiveProps(){

    }

    shouldComponentUpdate(nextProps, nextState){
        if(this.props.image==nextProps.image){
          return false;
        }
        return true;
    }

    componentWillUpdate(){

    }

    componentDidUpdate(){

    }

    componentWillUnmount(){

    }
}

   const mapStateToProps = (state) => {
     return {
     image: state.PageDataReducer.image
     };
   };

   const mapDispatchToProps = (dispatch) => {
     return {
       apiCall: (link) => {
         dispatch(fetchProduct(link));  // fetchProduct() -> is a function which fetches the product from the                                  // network and dispatches the action.
       },
     };
   };

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

fetchProduct() [获取产品的函数]

export function fetchProduct(link) {
  return function(dispatch){
    // fetches the product over network
    dispatch(fetchedProduct(productLink));
  }
}

fetchedProduct [操作]

export const fetchedProduct = (productLink) => {  
  return {
    type: FETCHED_PRODUCT,
    image: image
  };
};

PageDataReducer [缩减器]

export default function PageDataReducer(state = initialState, action) {

   switch (action.type) {

    case FETCHED_PRODUCT:
    var newState = {
      ...state,
      image: action.image
    };
      return newState;

    default:
      return state;
    }
}

我的观察:每当导航中出现相同的页面并且该页面存储中的状态发生变化时，它就会调用该页面的 ma​​pStateToProps() 次数在导航堆栈中。因此，它循环遍历该页面的生命周期方法以根据最新状态更改状态的次数。
在此示例中，当我点击抽屉中的香蕉时，它将商店中的状态从芒果更改为香蕉并且 mapStateToProps() 被调用了 3 次(因为该页面在导航堆栈中出现了 3 次) 因此 从 componentWillReceiveProps() 到 componentDidUpdate() 的所有生命周期方法都被调用了 3 次只是为了改变根据最新状态显示该页面的状态。

我想要的:我想要导航中页面的不同状态，以便在返回时我可以看到我访问过的所有不同产品。

根据 redux 架构，问题很明显，但我没有找到解决它的诀窍。非常感谢任何帮助或任何其他解决方法来实现我的目标。

Answer 1

您应该将域数据(例如有关苹果、芒果和香蕉的数据)的存储与 UI 状态(例如当前选择的项目)的存储分离。在域数据部分，您将存储所有已加载的项目(您可能希望稍后添加一些垃圾收集策略，例如最近最少使用的列表以节省一些内存)。

然后， View 组件将连接到应用状态树的两个部分:连接到 UI 部分以获取当前选择的内容，连接到域部分以获取有关所选项目的详细信息。

在您的 mapStateToProps 函数中，首先提取当前选择，这必须是一个标识符。您也可以从其他地方提取它，例如来自组件 Prop (mapStateToProps 的第二个参数)。然后使用提取的标识符从域数据存储中获取已加载的数据。如果选择的数据不在商店中(例如，当用户第一次访问该页面时，或者它已经被垃圾收集)，您将空值放入 Prop ，这意味着 componentDidMount 或 componentWillReceiveProps 钩子(Hook)他们必须发出数据加载请求(它可能被实现为向 saga 或 thunk 发出数据需求信号的 Action 的分派(dispatch)，具体取决于您用于管理数据加载的内容)，当发生这种情况时，渲染将返回一些“正在加载...” stub 。当请求完成时，另一个调度将更新域数据存储更新，这将触发连接进行另一个 mapStateToProps 调用，这将导致发现所选数据已经在存储中，因此不会发出新的数据加载请求，渲染器将有足够的数据用于显示。