Redux with React Native

Manage React Native Data with Redux

Photo by Nubelson Fernandes on Unsplash

Getting Started

Create a new Expo managed TypeScript blank project if you don’t have an existing project you are working with (replace ‘todo’ with what you want to name your project):

expo init todo

To start using Redux, you’ll have to install the Redux and React Redux packages:

npm install --save redux react-redux
npm install --save-dev @types/react-redux 

Also, if you want to follow along with this tutorial, you can install react-navigation:

Initializing the Store

1. Create a new folder called ‘store’ to hold all of our store logic
2. In the App.tsx file, create a new store instance and wrap your app in the <Provider/> tag:

Creating the Store files

1. Create a new file in the ‘store’ folder called ‘rootReducer.ts’ with the following:

2. Create a new folder in the ‘store’ folder ‘todo’ and add the following files

store/todo/actions.ts

store/todo/model.ts

store/todo/reducer.ts

store/todo/selectors.ts

3. Now your store is ready to use for todos!

Below is an example home page that lists all todos and has an event listener that navigates the user to a ‘detail’ page when a todo is clicked.

And the detail page:

Done!

Practice

If you want to test your knowledge on what you learned above, try implementing the following:

• Allow the user to check / uncheck a todo
• Allow the user to add a new todo
• Allow the user to delete a todo

—

Check out the full GitHub repo with the above example:

jakecyr/react-native-redux-example

Also checkout my video on YouTube to see the above explained in more detail: