需要有关 ReactNative 和 Redux 以及 Navigator 的一些概念的帮助 [英] Need help on some concepts about ReactNative and Redux and Navigator

问题描述

在这个场景中经过多次测试，我有一些我自己无法回答的问题，所以我请求帮助澄清我的概念.

After several tests in this scenario, I have some questions that I can not answer my self, so I ask for help to clarify my concepts.

1. 导航器中的提供者与道具

有什么区别以及设置导航器并将商店传递到 React Native 应用程序的不同场景的最佳方法是什么

What is the difference and what is the best approach to setup the Navigator and pass store to different Scenes of a React Native app

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>                        //<-- here
        <Navigator style={{flex: 1}}
        initialRoute={{ component: MainContainer }} //<-- here 

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

MainContainer 与 react-redux connect 函数内的 Component 连接，将 Props 和 Actions 传递给 props.

MainContainer is connected with Component within react-redux connect function to pass Props and Actions to props.

是更好地访问上下文还是道具?

Is it better access to context or to props?

对比

const store = createStoreWithMiddleware(reducer, initialState); //<-- here
export default class App extends Component {
render () {
  return (
    <Navigator style={{flex: 1}}
      initialRoute={{ component: MainComponent }}

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

1. 在组件场景中，(不作为智能容器包装)如何设置 侦听器 关于 redux 状态 的变化或让 i 绑定 组件状态 到 redux 状态.

1. In a component Scene, (not wrapping as a smart container) how to setup a listener about changes in redux state or have i to bind component state to redux state.

在Navigator中推送newScene时，将state(Redux store的)和actions作为passProps传递，然后在 newScene 分派动作并正确执行，状态为更新，但...不会重新渲染场景.

Passing state (of Redux store) and actions as passProps when pushing newScene in Navigator, and in then newScene dispatch actions and executed correctly, the state is update, but... does not re-render the scene.

我是否必须将 state 组件绑定到 Redux state 才能看到屏幕上反映的更改?

Do I have to bind state component to Redux state to see the changes reflected on screen?

是否有关于此场景中最佳实践的示例?

Is there any sample about best practices in this scenario?

1. props vs connect 在同一个Scene

在相同的Scene中，从Top到Down的组件，这是传递redux state(不是在谈论 component state)作为将组件包装在 'smart' 容器 中，使用来自 react-redux 的 'connect'，或将洞场景作为 props 传递.

In the same Scene, from Top to Down components, which is the best approach to pass redux state (not talking about component state) as wrapping a component in a 'smart' container with 'connect' from react-redux, or passing the hole scenario as props.

推荐答案

1. 应该使用第一个解决方案，因为提供程序应该是最外层的组件(这样下面的所有内容都可以正确连接).
2. 您可以在 componentDidReceiveProps 上运行回调，或者(我更喜欢)简单地连接需要访问商店的组件.这正是 redux 的用途.不这样做的唯一原因是，如果您想重用一个组件与另一个存储内容(真正具有代表性的组件)
3. 这在很大程度上取决于应用程序和组件的深度，但总的来说，这完全没问题.您也可以将信息作为 props 传递，但是随着您的应用程序变得越来越大，您可能需要传递很多 props，这可能会混淆组件的真正意图

1. The first solution should be used, as the provider should be the outermost component (so that everything underneath may connect properly).
2. You could either run a callback on componentDidReceiveProps or (what I would prefer) simply connect the component, which needs access to a store. This is exactly what redux is for. The only reason not to do this is if you would like to reuse a component with another stores content (truly representational component)
3. This strongly depends on the application and the depth of the components but in general, this is completely okay. You may also pass the information as props, but as your application grows bigger you may have to pass a lot of props, which may obfuscate the real intend of you components

这篇关于需要有关 ReactNative 和 Redux 以及 Navigator 的一些概念的帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！