Tuesday, October 20, 2020

Using Redux in a React Native App

Using Redux in a React Native App

Redux is a library for state management that ensures that the application logic is well-organized and that apps work as expected. Redux makes it easy to understand your application's code regarding when, where, why, and how the state of the application is updated.

Redux is made up of the following key parts:

  • actions
  • reducers
  • store
  • dispatch
  • selector

In this post, we'll look at each part of the Redux architecture in turn.

Actions and Action Creators

An action is a plain JavaScript object that has a type field and an optional payload. It can also be thought of to as an event that describes something that has happened.

Action creators are just functions that create and return action objects.

Reducers

reducer is also a function that receives the current state and an action object, updates the state if necessary, and returns the new state. A reducer is not allowed to modify the existing state; instead, it copies the existing state and changes the copied values. In other words, the reducer should be a pure function.

Here is an example. 

Store

A store is an object that stores the current state of a Redux application. You create the initial state of the store by passing a reducer to the configureStore functIon.

To get the current state of a store, use the getState() function as above.

Dispatch and Selectors

dispatch() is a Redux store method and is used to update the state by passing an action object. Here, we create a task/taskAdded action with the addTask() action creator, then pass it to the dispatch() metdho.

Selectors are used for reading data from a store.

Tutorial on Using Redux With React Native

In this React Native Redux tutorial, you will develop an app that allows a user to choose from a given set of subjects. The app will contain two screens and you will also learn how to navigate between them using react-navigation

Create a New React App

Create a new project using Expo CLI tool

Currently, you have a single component  App.js displaying a welcome message. 

Create two new components in Home.js and Subjects.js The home component will be the first screen a user sees, and the subjects component will display all the subjects in our app. Copy the code from App.js and add it to Home.js and Subjects.js.

Modify Home.js and Subjects.js to use Home and Subjects instead of the App class.

Subects.js should look similar.

Navigating Between Screens

Currently, there is no way to navigate between the two screens. The stack navigator allows your app to transition between screens where each new screen is placed on top of a stack.

First, install @react-navigation/native and its dependencies.

For an Expo managed project, install the following.

Go to App.js and import react-native-gesture-handlerat the top. You also need to add  NavigationContainer and createStackNavigator to App.js. Then, to add navigation capabilities, wrap the components inside the App class in a NavigationContainer component. 

Now the navigator is aware of your screens, and you can provide links for transitioning between screens.

Redux in a React Native App

As we mentioned earlier, Redux is a state management tool, and you will use it to manage all the states of the application. Our application is a subject selector where the user chooses the subjects from a predefined list.

First, install the Redux packages.

A Redux app follows the following conditions:

  • The state completely describes the condition of the app at any point in time.
  • The UI is rendered based on the state of the app. 

For example, when a user clicks a button, the state is updated, and the UI renders the change based on the state.

Create a Reducer

The reducer will be responsible for keeping the state of the subjects at every point in time.

Create the file SubjectsReducer.js at the root level and add the following code.

In this file, you create an INITIAL_STATE variable with all the curriculum subjects and export the subjects reducer as a property called subjects. So far, the subjects reducer doesn't respond to any actions—the state can't change.

Create an Action

An action has a type and an optional payload. In this case, the type will be SELECT_SUBJECT, and the payload will be the array index of the subjects to be selected.

Create the SubjectsActions.js file at the root level and add the following code.

Now, we'll update the reducer to respond to this action.

Add the Reducer to the App

Now, open App.js, and create a new store for the app using the createStore() function. We also make that store available to the components in our app by wrapping them in the <Provider> component. This will ensure that the store's state can be accessed by all of the child components.

Add Redux to the Components

Now let's see how to make state data available to components with the connect() function. To use connect(), we need to create a mapStateToProps function, which will maps the state from the store to the props in the two components.

Open Home.js, map the state, and render the values for the current subjects (which will be found in this.props.subjects.current). Also, add a button to navigate to the Subjects component.

Similarly, we'll use connect in the Subjects.js  file to map the state to the component properties. 

We'll also add the code to display all the subjects in the Subjects component and a button to navigate to the Home screen. You will also add a button that will add the addSubject action to Subject.js. Here's what the final render() method in Subject.js should look like this:

The final app should look like this.

redux app

Conclusion

Redux is a valuable tool, but it is only useful when used in the right way. Some of the situations where Redux might be helpful include code that is being worked on by many people or applications that contain large amounts of application state.

In this tutorial, you learned how to set up a React Native app using Redux.

The Best React Native App Templates on CodeCanyon

CodeCanyon is a digital marketplace offers the best collection of React Native themes and templates. With a React Native app template, you can get started building your apps in the fastest time possible.

If you have trouble deciding which React Native template on CodeCanyon is right for you, this article should help: 



No comments:

Post a Comment