Question

使用 Redux 测试 React Native ，以及 react-redux ，我发现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启动Container。这是良好的绑定状态和组件的方式（我相信）

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之间没有区别。只需通过Container调用App1Component（并绑定状态和动作），并通过使用Navigator推送所有相同的道具（在App1Component中相同）来调用App2Component（来自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 logger的跟踪。

这里是App1Component的包装容器

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

此处为组件2，带后退按钮。如果你在这里按'放大'，字符串会被放大，确定你可以看到铬上的痕迹，但是......动作没有反映在屏幕上。

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>
    )
  }
}

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

正如你所看到的，我误解了一些基本的东西，但不是什么。

我是否要用容器装饰所有电源组件（Pages / Scenes）？为什么通过Navigator中的passPros传递道具（先前由容器绑定）是错误的？操作会正确分派，但不会反映在屏幕上。

欢迎任何帮助。感谢

Answer 1

看起来像passProps does not propagate updates correctly。我不是React Native专家，所以我无法确认，但我肯定会建议您使用connect()订阅Redux商店的组件，而不是从顶部传递道具。

通过带有导航器或绑定状态的passProps在Container中传递Redux状态的差异

1 个答案: