通过 passProps 和 Navigator 传递 Redux 状态或在 Container 内绑定状态的区别

Question

用Redux和react-redux测试React Native，发现Redux的状态树内容不是如果状态不通过 Container，则反映在显示中。

为了测试这个我使用

• react-native 0.19.0
• react-redux 4.1.2
• redux 3.1.7

@alinzin 在https://github.com/alinz/example-react-native-redux 中解释了设置这个项目的所有技巧。还有其他好的解决方案吗？

下一个例子展示了一个简单的字符串作为 Redux 存储中的状态，以及一个简单的放大字符串的动作。

这里是reduce和数据作为状态中的单个字符串。

//Reducer
const reducer = (state = { data: '[][][]' }, action = {}) => {
  switch (action.type) {
  case ENLARGE:
    return Object.assign({}, state, {
      data: state.data+'[]'
    })
  default:
    return state
  }
}

注册的App就是这样，没什么新意。初始路由启动 App1Component 的容器。这是良好的绑定状态和组件的方式（我相信）

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>
        <Navigator style={{flex: 1}}

          initialRoute={{
            component: Container,

          }}

          renderScene={ (route, navigator) => {
            const Component = route.component;
            return (
              <View style={{flex: 1, marginTop:40}}>
                <Component navigator={navigator} route={route} {...route.passProps} />
              </View>
            );
          }}
        />
      </Provider>
    )
  }
}

组件 App1Component 和 App2Componenet 的主要内容是一个简单的组件，只显示字符串，并显示一个“按钮”来调度放大操作。

class MainContent extends Component{
  render() {
    return (
      <View>
        <Text>{this.props.data}-{this.props.data.length}</Text>
        <TouchableOpacity onPress={()=>{this.props.enlarge()}} >
          <Text>Click to Enlarge me!</Text>
        </TouchableOpacity>
        <Text> </Text>
      </View>
    )
  }
}

组件 App1 和 App2 之间没有区别。 只是 App1Component 通过 Container 调用（并绑定状态和动作），而 App2Component 通过使用 Navigator 推送所有相同的道具（在 App1Component 中相同）来调用（从 App1Component）

这是带有按钮的 App1Component，用于将下一个场景推送到 App2Component 并传递相同的道具，然后通过 Container 绑定。

class App1Component extends Component {
  render() {
    return (
      <View>
      <MainContent {...this.props}/>
        <TouchableOpacity onPress={()=>{
          this.props.navigator.push({
            name: 'App2',
            component: App2Component,
            passProps: {...this.props}
           })
        }}>
          <Text>Click to Forward to App2Component {'\n'}passing props through Navigator passProps</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

如果您在此处按“放大”，则字符串被放大，您可以看到屏幕上反映的动作。您还可以在 chrome 中看到 redux 记录器的跟踪。

这里是 App1Component 的包装容器

const Container = connect(
  (state) => ({
    data: state.data
  }),
  (dispatch) => ({
    enlarge: () => dispatch(enlarge())
  })
)(App1Component)

这里是组件 2，带有后退按钮。 如果在此处按“放大”，字符串会被放大，确保您可以在 chrome 上看到痕迹，但是...该操作不会反映在屏幕上。

class App2Component extends Component {
  render() {
    return (
      <View>
        <MainContent {...this.props}/>
        <TouchableOpacity onPress={()=>{this.props.navigator.pop()}} >
            <Text>Back to App1Component{'\n'}to see the change!</Text>
          </TouchableOpacity>
      </View>
    )
  }
}

按返回后，您可以在屏幕上看到 App1Component 修改的字符串。

如您所见，我误解了一些基本的东西，但不是。

我必须用一个容器来装饰所有的主要组件（页面/场景）吗？ 为什么在 Navigator 中通过 passPros 传递道具（之前由容器绑定）是错误的？动作已正确分派，但不会反映在屏幕上。

欢迎任何帮助。 谢谢

Answer 1

看起来像passProps does not propagate updates correctly。我不是 React Native 专家，因此无法确认，但我绝对建议您使用 connect() 将组件订阅到 Redux 存储，而不是从顶部传递 props。