2.4 Using Redux in React Native App Part 1

In this tutorial, you will set up Redux in your React Native application. And you will connect to Redux and obtain the state informations such as leaders from there. At the end of this tutorial, you will be able to:

  • Set up Redux for your app
  • Create reducers, actions and action creators

Redux lifecycle

2.4.1 Dataflow



2.4.2 How to

1. Install Redux:

  • Install redux (tested on v4.2.0), react-redux (tested on v8.0.2), redux-thunk (tested on v2.4.1), and redux-logger (tested on v3.0.6).
    • $ expo install redux react-redux redux-thunk redux-logger
2. Create 'shared/baseUrl.js' file. 3. Setting up Redux:
  • (a) Create 'redux/ActionTypes.js' file (action).
  • (b) Create 'redux/ActionCreators.js' file (action).
  • (c) Create 'redux/leaders.js' file (reducer).
  • (d) Create 'redux/ConfigureStore.js' file (store).

4. Connecting to Redux:

  • (a) Update 'App.js' file.
  • (b) Update 'components/MainComponent.js' file.
  • (c) Update 'components/AboutComponent.js' file.

2.4.3 Screenshots