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
- Have no idea what is Flux? watch the following video (14 min)
- 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:
- To import
connect
fromreact-redux
and theaction$fetchPosts
from the action file that we had just created. - We will create the
mapStateToProps
function that will return the posts - We will export the connect function with
mapToProps
and the action so it will be available via props. - We will dispatch the action in the
componentDidMount
lifecycle method. - 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 :)