Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account

    Add Redux to an Existing React Native Application

    react-nativeReact Native

    First, install redux with: npm install --save redux and install react-redux with: npm install --save react-redux

    In the top level of your component tree, import createStore from redux, and use it to create a new store with a simple reducer:

    import { createStore } from 'redux'

    const rootReducer = (state = {}, action) => { return state }

    const store = createStore(rootReducer)

    Also import Provider from react-redux:

    import { Provider } from 'react-redux'

    And then wrap your app's components with a Provider component, and pass in your store as a prop:

    <Provider store={store}> ... </Provider>

    Then, you can connect any sub components with the connect function, by first importing it:

    import { connect } from 'react-redux'

    And then calling it with a mapStateToProps or mapDispatchToProps argument, and then passing in the unconnected component:

    const ConnectedLoginGate = connect(state => ({ username: state.auth.username }))(LoginGate)