ルートコンポーネントからのReact/Reduxディスパッチアクション？

Question

私はFire-BaseをReact-Native/Reduxで使用しようとしています。ユーザーがサインインまたはサインアウトするたびにアクションをディスパッチする必要があります。ルートコンポーネントからアクションをディスパッチするにはどうすればよいですか？

class App extends Component { 
    componentWillMount() { 
     firebase.auth().onAuthStateChanged((user) => { 
      if (user) { 
      // Dispatch Action here 
      } else { 
      // Disptach Action here 
      } 
     }); 
    } 

    render() { 
     const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

     return (
      <Provider store={store}> 
       <Router /> 
      </Provider> 
     ); 
    } 
} 

export default App; 

Answer 1

class App extends Component { 
    constructor() { 
     this.store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 
    } 

    componentWillMount() { 
     firebase.auth().onAuthStateChanged((user) => { 
      if (user) { 
       this.store.dispatch(...); 
      } else { 
       this.store.dispatch(...); 
      } 
     }); 
    } 

    render() { 
     return (
      <Provider store={this.store}> 
       <Router /> 
      </Provider> 
     ); 
    } 
} 

export default App; 

を経由して渡された自分のコンポーネントの小道具からアクションを参照することができ、render()関数内の任意の副作用がありません。それは純粋な機能でなければなりません。

Answer 2

ドキュメントhereを見つける... ReduxのconnectとmapDispatchToPropsを使用してください。 Connectは引き続きルートコンポーネントで動作します。その後で、あなたのcomponentWillMountあなたはconnect

Answer 3

この問題の解決策が見つかりました。最高の方法ではありませんが、それは動作します。

Root Component（App.js）でloggedInをtrueまたはfalseに設定して認証を要求します。 （下の例ではfirebase認証を使用しています）

これで、状態をコンポーネント（InitialSetUp.js）に渡し、Reduxを使用して状態を設定できます。

InitialSetUpでは、ルートのように行動して、アプリケーション自体をレンダリングします。

この例は次のとおりです。

App.js

... 

const store = createStore(reducers, 
window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__()); 

export default class App extends Component { 
state = { loggedIn: null}; 

componentWillMount() { 
firebase.initializeApp({ 
...YOUR SETUP 
}); 

firebase.auth().onAuthStateChanged((user) => { 
if (user) { 
this.setState({ loggedIn: true}); 
} else { 
this.setState({ loggedIn: false}); 
} 
}); 
} 

renderInitialView() { 
return <InitialSetUp loggedIn={this.state.loggedIn}/> 
} 

render() { 
return (
<Provider store={store}> 
<View style={styles.container}> 
{this.renderInitialView()} 
</View> 
</Provider> 
); 
} 
} 

InitialSetup.js

... 

class initialSetUp extends Component { 

renderInitialView() { 
this.props.setLogged(this.props.loggedIn); 
return <Navigation /> 
} 

render() { 
return (
<View style={styles.container}> 
{this.renderInitialView()} 
</View> 
); 
} 
} 

export default connect(null, actions)(initialSetUp); 

グッドラック私はこれを試してみた