Use Redux with React Hook in React Native

Tram Ho

With React Hook widely used, component state handling and side effects are too common in function components. React Redux introduced Hook API functions as an alternative to connect() .

In this tutorial, we will build a simple React Native app for users to write notes and save them. If you are familiar with the basic React Hook function and how to use it, you can continue with this tutorial, otherwise you should learn about the basics of React Hook first.

Install Redux

Please install Redux through the instructions here: https://redux.js.org/introduction/installation/ Then check the dependencies in the package.json file again.

Then install the following dependencies using the terminal

The above installation helps you manage all Redux related files in one convenient place, it's called ducks. You can refer to the following article to learn more: https://medium.com/swlh/the-good-the-bad-of-react-redux-and-why-ducks-might-be-the- solution-1567d5bdc698

Add action type and creator

When Redux controls the state of an application, the state is expressed as a Javascript object. Please understand that this object is read-only, we cannot change it on our own. Which must use action to do.

Actions are events in redux. It could be a push of a button, a timer, or a network request.

To get started, create a redux directory in src . Then create a noteApp.js file.

Since this app does note-related work, in the newly created file, start with the following 2 actions.

Next are the functions that create these actions.

Add a Reducer

The part that receives actions is called the reducer. Whenever the action is triggered, the application state will change. Managing this state relies on reducers.

The Reducer is a pure function that calculates the next state based on its previous state. It always returns the same output if the state doesn't change. It has two parameters state and action and must always return state .

The initialized state will be an empty array. Please import more remove in lodash.remove that you added earlier.

Customize the Redux store

Store is an object that connects actions with reducers. It provides and holds state at the application level instead of in components.

With the Reducer created, create a new store.js file inside src/redux/ . Add the createStore function in redux .

To connect the Redux store with the React native app, do the following in the App.js file

Access to global state

To access, use Hook's useSelector function. It should be similar to mapStateToProps in connect() . The difference between them is that the hook function can return more than just objects.

Open the ViewNotes.js file. Please add the following

Next, instead of saving the note into a notes array using useState() , replace it as follows

Dispatch action

The useDispatch() function is exactly the same as the dispatch function in the Redux store. Add it as follows

To dispatch the action, do the following

And add these actions to the UI to trigger

End

By using useSelector and useDispatch , we not only eliminate a lot of code, but also provide a better access to the functional component. You should use this method with Redux will reduce a lot of time of that code. Thank you for reading.

REF: https://heartbeat.fritz.ai/using-redux-with-react-hooks-in-a-react-native-app-cc410a77f3e2

Share the news now

Source : Viblo