Adding Redux

Redux is an essential part of the React Native ecosystem. If your world revolves around JavaScript, you’ve probably heard about Redux. Until you have a concrete solution, managing state across an entire application can be tricky. Though not the only solution, using Redux can be helpful in this effort.

To get started, run the following command to install Redux as a library.

Apart from redux , the other two packages have important uses. react-redux lets your React Native components connect with the Redux store. redux-thunk is a middleware that enables you to make Redux actions return asynchronous operations. A thunk is a function that wraps an expression to delay its evaluation.

In Redux, the state of the whole application is represented by one JavaScript object. Think of this object as read-only, since we cannot make changes to this state (which is represented in the form of a tree) directly. We need actions to do so.

Actions are like events in Redux. They can be triggered in the form of mouse clicks, key presses, timers, or network requests. The nature of each event mentioned is mutable. An action is a JavaScript object. To define an action, there’s one requirement. Each action has its own type property. Every action needs a type property for describing how the state should change. Create a new file called actions/user.js and add the following types to it.

Make sure you don’t ignore the import statement. We will use it in a while to write business logic behind login and signup methods. Below these types, let’s define all the action creators we’re going to need later.

Inside the methods login and signup , we’re writing the same business logic to interact with the Firebase authentication service that we did previously in Login and Signup components separately. Also, we’re dispatching the user from each of these actions in order to trigger the changes in the app's state. The only way to change the app's state is through action. The getState method used in the above snippet allows accessing the current state of the application.

Next, define reducers to handle the state of the application. Create a new file inside reducers/index.js with the following code.

In Redux terminology, a reducer is a JavaScript function that takes two parameters. They are the current state of the application and an action. A reducer is a pure function that calculates the next state based on the initial or previous state. It always produces the same output if the state is unchanged. In the above snippet, the current state of this application is an empty object. It gets updated whenever the user provides an email and password.

Next, open App.js to create a redux store.

A store is an object that brings actions and reducers together. It provides and holds state at the application level instead of individual components. Redux is not an opinionated library in terms of which framework or library should use it or not. To bind a React Native application with Redux, you do it with react-redux module. This is done by using the high ordered component Provider. It basically passes the store down to the rest of the React Native application.