Нужна помощь по некоторым понятиям о ReactNative, Redux и Navigator.

После нескольких тестов в этом сценарии у меня есть некоторые вопросы, на которые я не могу ответить сам, поэтому я прошу помощи, чтобы прояснить мои концепции.

  1. Поставщик и реквизиты в Navigator

В чем разница и как лучше всего настроить навигатор и передать хранилище в разные сцены приложения React Native.

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 связан с Component в функции react-redux connect для передачи реквизитов и действий в props.

Это лучший доступ к контексту или к реквизиту?

vs

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. В компонентной сцене (не обертывающей как смарт-контейнер), как настроить слушатель об изменениях в состоянии редукции или сделать так, чтобы я привязывал состояние компонента в редукционное состояние.

Передача state (из магазина Redux) и actions как passProps при нажатии newScene в Navigator, а затем newScene диспетчеризирует действия и выполняется правильно, состояние обновляется, но... не перерисовывает сцену.

Нужно ли привязывать компонент состояния к состоянию Redux, чтобы увидеть изменения, отраженные на экране?

Есть ли образец передового опыта в этом сценарии?

  1. props и connect в одном и том же Scene

В тех же Scene, сверху вниз компоненты, что является лучшим подходом для передачи redux state (не говоря о component state) как обертывание компонента в 'smart' container с 'connect' от react-redux или передать сценарий дыры как props.


person Santi    schedule 21.02.2016    source источник
comment
Было бы здорово, если бы вы могли в следующий раз разбить свои вопросы на несколько постов, скорее всего, вы получите более быстрые ответы по отдельности ;)   -  person Daniel Schmidt    schedule 30.05.2016


Ответы (1)


  1. Следует использовать первое решение, так как поставщик должен быть самым внешним компонентом (чтобы все, что находится под ним, могло правильно подключаться).
  2. Вы можете либо запустить обратный вызов на componentDidReceiveProps, либо (что я бы предпочел) просто подключить компонент, которому требуется доступ к хранилищу. Это именно то, для чего нужен редукс. Единственная причина не делать этого - если вы хотите повторно использовать компонент с содержимым другого хранилища (действительно репрезентативный компонент).
  3. Это сильно зависит от приложения и глубины компонентов, но в целом это совершенно нормально. Вы также можете передавать информацию в качестве реквизита, но по мере того, как ваше приложение становится больше, вам, возможно, придется передавать много реквизитов, которые могут запутать реальное назначение ваших компонентов.
person Daniel Schmidt    schedule 30.05.2016