このシナリオでいくつかのテストを行った後、自分では答えられない質問がいくつかあるので、自分の概念を明確にするために助けを求めます。
- ナビゲーターのプロバイダーと小道具
ナビゲーターをセットアップし、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
propsと Action を に渡すためComponent
に react-redux 関数内で接続されています。connect
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>
...
- コンポーネント シーンで (スマート コンテナとしてラッピングするのではなく) 、 redux 状態の変化に関するリスナーをセットアップする方法、またはコンポーネントの状態を redux 状態にバインドする方法。
state
(Redux ストアの) を渡し、をプッシュしたときactions
のように、アクションをディスパッチして正しく実行すると、状態は更新されますが、... はシーンを再レンダリングしません。passProps
newScene
Navigator
newScene
画面に反映された変更を確認するには、状態コンポーネントを Redux 状態にバインドする必要がありますか?
このシナリオのベスト プラクティスに関するサンプルはありますか?
props
対connect
同じScene
同じScene
で、コンポーネントを上から下に、コンポーネントをwith ' ' fromでラップするか、穴のシナリオを として渡すredux state
(については話さない)ための最良のアプローチです。component state
'smart' container
connect
react-redux
props