4

このシナリオでいくつかのテストを行った後、自分では答えられない質問がいくつかあるので、自分の概念を明確にするために助けを求めます。

  1. ナビゲーターのプロバイダーと小道具

ナビゲーターをセットアップし、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>
  ...

MainContainerpropsと Action を に渡すためComponentに react-redux 関数内で接続されています。connectprops

コンテキストまたは小道具へのより良いアクセスですか?

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 状態の変化に関するリスナーをセットアップする方法、またはコンポーネントの状態を redux 状態にバインドする方法。

state(Redux ストアの) を渡し、をプッシュしたときactionsのように、アクションをディスパッチして正しく実行すると、状態は更新されますが、... はシーンを再レンダリングしません。passPropsnewSceneNavigatornewScene

画面に反映された変更を確認するには、状態コンポーネントを Redux 状態にバインドする必要がありますか?

このシナリオのベスト プラクティスに関するサンプルはありますか?

  1. propsconnect同じScene

同じSceneで、コンポーネントを上から下に、コンポーネントをwith ' ' fromでラップするか、穴のシナリオを として渡すredux state(については話さない)ための最良のアプローチです。component state'smart' containerconnectreact-reduxprops

4

1 に答える 1