Go ProSign in

This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Hide playlist

    Add Redux to an Existing React Native Application

    Chris AchardChris Achard

    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)

    You must be a Member to view code