顶层组件根-场景/路由器反应-本机-路由器-流量

Question

我想在我的场景的顶层添加一些“逻辑组件”。

我明白了：

<Router>
    <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} />
        <Scene key="search" component={SearchContainer} />
        <Scene key="list" component={ListContainer} />
        ...
    </Scene>
</Router>

每个容器都使用connect()()连接到Redux，每个容器都有自己只需要的还原器。

即：

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)

所以，我需要做的是将“根”场景连接到Redux，并给它一个通用的还原器(也是所有其他场景所依赖的)。但有了这个，我想用componentDidUpdate，componentWillReceiveProps .若要侦听，即当连接发生变化时，更新还原程序的状态。

我不确定是否清楚，希望如此。如果你需要更多的信息，就问问他们。

谢谢你的帮助

溶液

看看atlanteh的答案，看看它说的所有需要的文档:) https://github.com/aksonov/react-native-router-flux/tree/master/docs

我的最后一种解决方案是：

const ConnectedRouter = connect()(Router)

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} />
    </Scene>
)

class ReduxRouter extends Component {
  componentWillReceiveProps(newProps) {
      if(!newProps.isConnected) {
          // logic
      }
  }
  render() {
    return (
      <ConnectedRouter scenes={scenes} {...this.props}/>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // State
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    // Actions
  }, dispatch);
}

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

它基本上是我以前尝试过的所有东西的混合，而且效果很好！没有“键xxx已经定义”或任何东西。

Answer 1

你可以这样做：

class MyRouter extends React.Component {
    componentWillReceiveProps(newProps) {
        if(!newProps.network.isActive) {
            // do something here
        }
    }
    render() {
        <Router>
            <Scene key="root" hideNavBar={true}>
                <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} />
                <Scene key="search" component={SearchContainer} />
                <Scene key="list" component={ListContainer} />
                ...
            </Scene>  
        </Router>  
    }
}
const mapStateToProps = state => state;
export default connect(mapStateToProps)(MyRouter);

这个组件作为你的路由器，所以现在你有一个路由器，它连接到状态。

请注意，您还可以将react本机路由器流量连接到状态，并且它将分派它所做的导航：

const ConnectedRouter = connect()(Router);

编辑-避免已经定义的密钥

若要避免已定义的键，可以使用：

const scenes = Actions.create(
   <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} />
        <Scene key="search" component={SearchContainer} />
        <Scene key="list" component={ListContainer} />
        ...
    </Scene>  
)

然后在路由器中：

<ConnectedRouter
   scenes={scenes}
 />

Answer 2

如果您正在正确更新存储中的数据，则任何已连接的数据都应刷新。

如果您可以看到操作/还原器正在运行，但是连接的组件永远不会重新呈现，那么您很可能在还原器中发生变异状态，并且连接的组件从未注意到数据的更改。

如果您正在修改商店中的深度嵌套属性，那么我强烈建议使用ImmutableJS。