// main.js
import { Provider } from 'react-redux';
import store from './store';
// the Provider component accepts a store as prop, it makes the store available to all its children component
class App extends React.Component {
render() {
return (
<Provider store={store}>
<MainNavigator />
</Provider>
);
}
}
Children component to consume
// AuthScreen.js
import React, { Component } from 'react';
import { View, Text, AsyncStorage } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
// or import only the facebookLogin action creator
// import { facebookLogin } from '../actions';
class AuthScreen extends Component {
componentDidMount() {
this.props.facebookLogin();
this.onAuthComplete(this.props);
}
componentWillReceiveProps(nextProps) {
this.onAuthComplete(nextProps);
}
onAuthComplete(props) {
if (props.token) {
this.props.navigation.navigate('map');
}
}
render() {
return (
<View />
);
}
}
function mapStateToProps({ auth }) {
return { token: auth.token };
}
export default connect(mapStateToProps, actions)(AuthScreen);
Lastly, let's hit it home with a diagram I found on the internet, which illustrates the Redux flow.
Install dependencies
Create store
Create reducers
Create actions
main.js setup
Children component to consume
Lastly, let's hit it home with a diagram I found on the internet, which illustrates the Redux flow.