app development · react native

Build an Expense Manager App with React Native – Part 2

Using Redux and Redux SAGAS

Redux is a very important library to manage the app’s state. This state will be accessible across all our app’s components without the need to pass the state to each component through props

In our App.js we create the app’s store, to which we pass the initial state

The rootReducer initiates the state:

You should see the reducer as the way to edit the state through sending signals to the store. These signals are referred to as actions. Each action must have a type.

We will declare the following actions:

The state is immutable. You updated it by copying the current state’s data and adding in new data.

Create a new file in App/actions. let’s name it index.js. This will hold all the dispatch action code for our 4 actions above.

Comes Redux SAGA

Redux Saga is a middleware that comes in handy to manage the asynchronous API calls. Setup the middleware in App.js like this:

Manage REST API calls

Axios is a useful library to make HTTP calls. We will use it alongside redux-saga to make our network requests.

Add the dependency:

Then import it in our saga file:

Set API token

Usually you will access secure APIs through some authorization mechanism. In our example API, we will need an auth token. It is recommended to put it in an env variable and access it using react-native-dotenv. First, update your babel presets to add this package:

Create a file called .env at the root of the project:

You can access this value anywhere in your code by importing it:

Add authorization header to API calls

Using generator functions

Example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

A generator is a function that can stop midway and then continue from where it stopped.

https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5

If you are using React Navigation version 3+, it is recommended you don’t try to make redux manage the nav state and leave to RNN to do that.

Can I store the navigation state in Redux too?
This is technically possible, but we don’t recommend it – it’s too easy to shoot yourself in the foot and slow down / break your app. We encourage you to leave it up to React Navigation to manage the navigation state. But if you really want to do this, you can use react-navigation-redux-helpers, but this isn’t an officially supported workflow

— from RNN docs

Testing Sagas

For a start, head to this excellent article about testing redux sagas https://medium.com/@karanjariwala/testing-redux-sagas-with-a-plan-e59124c5d139


Head to part 3, to see how to connect our containers to the Redux store.