React Native Navigation V2 — Adding Redux

In this article we will pick off where we left in the article “React Native Navigation V2 is Here” and we will add Redux to our project.

TLDR: jump over to the last section and check out the new React Native Navigation V2 api for registering a redux component as screen.

Before we start, a quick note: In this article, I’m not going to go into the big argument about Redux Vs Mobx Vs other state management solutions. I would just say that I’m not a big fan of Redux… At Wix-Mobile team we use our own open source in-house state management library called Remx.

Preliminaries

1. Have no idea what is Flux? watch the following video (14 min)
2. Never used Redux? watch this video (47 min).

Where We Left Off and What are We Going to Add

In the previous article, we built a skeleton of a simple blog app. In this section, we will hook up the PostList screen to a Redux store and display the data of our posts.

If you want to follow along, you can clone the project repository and move to the redux-v2 branch. We will start by installing redux and react-redux

npm install --save redux react-redux

Defining Our Action

We will start by creating a new post.actions.js file under our posts folder.
For now, we will mock our posts data. So each post will look something like this:

{
“id”: 1,
“title”: “Post1”,
“text”: “Post1 text”,
“img”: “https/imagesrc.com”
}

And we will create a very simple action that will simply return our mock posts. Here is how our posts.actions.js file should look like:

Defining the Reducer and Our Store

Let’s create another file called posts.reducer.js with a super simple reducer that will handle the FETCH_POSTS action.

At this point in time we only have one reducer, but let’s create the boilerplate for our combineReducer for future use. In the root folder, we will create a reducers.js file and export a rootReducer with our postsReducer:

And finally, we will define our store in the root folder:

Connecting the Posts Lists to Redux

Our next goal is to display the mock data of the posts on the postsList.js screen. In order to do so we will need:

1. To import connect from react-redux and the action$fetchPosts from the action file that we had just created.
2. We will create the mapStateToProps function that will return the posts
3. We will export the connect function with mapToProps and the action so it will be available via props.
4. We will dispatch the action in the componentDidMount lifecycle method.
5. We will display the raw posts data (we will leave the design for later stages).

Here is what the PostList file looks like:

And now, for the moment that we have all been waiting for… Drumroll please…

Registering Our Screen as a Redux Component

After a long wait and huge threads at GitHub (#1642, #3108, #2792, #3411 and more…), the official Redux support for V2 is finally here and the api is very straightforward. We will just need to use Navigation.registerComponentWithRedux.

In our screens.js file, we will register the PostsList screen as a Redux component passing our store and Provider.

Here is what the Screens.js file looks like:

And it’s time to check if we can see our posts data in the app.

You can view all the steps on this commit.

What’s Next

In the upcoming posts (WIP) we are going to continue working on our app, adding all of the app logic (adding posts and deleting posts). We will work on the UI and add e2e tests using Detox and unit tests using Jest. So stay tuned please and click follow :)