Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    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)

    react-nativeReact Native
    reduxRedux
    javascriptJavaScript
    iosiOS
    androidAndroid
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 In the terminal, in the root of your existing React's Native project, install Redux with npm install --save redux. To connect Redux to your existing Native components, you'll also have to install React Redux with npm install --save react-redux.

    00:22 To create the Redux store, import createStore from Redux. Create your first reducer by just defining a function that takes in a state and an action and returns the same state.

    00:34 Create the Redux store by passing that reducer to the createStore function from Redux. Now, we can provide that store to our component. Import provider from React Redux, and then place a provider component around your entire application and pass in the store that we just created as a prop.

    00:52 This is going in the app.js file because it's the highest point in the component tree that needs access to Redux. You may choose a different location for your application, but the provider has to wrap in the component that you want to have access to the store.

    01:06 We can run that to make sure we haven't broken anything. It still works. Let's continue by extracting the root reducer out of the app component file.

    01:17 Create a folder called reducers, and inside of that, a file called index.js. I know I'll eventually want more than one reducer. Import combine reducers from Redux. The first thing I want to convert from local state is the login piece.

    01:32 I'll make my first reducer called auth. Pass that to combine reducers, which takes an object with the reducers as the values. Now, make a new auth reducer file and export the simplest possible reducer, which is a function that takes a state and an action, then returns a new state.

    01:51 Back in app.js, delete the old reducer and import the new reducer. Import connect from React Redux, which we can use to connect our component to the store. We can't connect the app component itself, however, because it contains the provider component. We'll need to make a new child component.

    02:12 We can connect the login gate component and pull out the username from the auth reducer. Use that new connecting component in the apps render method. We are pulling the username from the store now so we can remove all the internal state that deals with the username.

    02:30 We still have to put the username into the redux state on login. In the login component file, import connect from React Redux. We can export a new connecting component that makes an on login action available, which this patches a new login action.

    02:51 Finally, we can change the auth reducer at the end of the new login action, and put the username into the Redux store. When we reload now, you can log in, and it's using Redux to store the username instead of local state.

    03:05 There is one more thing that we could clean up, which is the on login action. Make a new folder called actions and a new file called auth.js. In there, we can make our new on login action. Back in the login component, we can import and use that action, which cleans up our connect statement significantly.

    Discuss

    Discuss