Adequate Infosoft
In our previous blogs, we have learned to create and >add widgets to a simple app with React.js, replacing redux with the help of the React hook, and many other things. Now it's time to move ahead and learn something new. In today’s article, we will access the state using Redux RTK.
To get started, we have to install the Redux Toolkit package. In our previous blogs, we detailed the entire >installation process for the Redux Toolkit. But, since we want to share complete information with our novice React developers, let's start from scratch.
Step 1: Install the Redux Toolkit package
>Installing Redux Toolkit and React-redux inside the project is the first step.
Since Redux Toolkit is already installed in Typescript format in the project, we only need to use the following command to install react-Redux:
Because React Redux depends on @types/react-redux, the package's type definition file will be installed automatically alongside it.
Step 2: Create an API with customBaseQuery
Our React Native project uses Redux RTK queries, so we are unable to access the state without launching the query each time. Therefore, you must use the command below to create an API with customBaseQuery.
Step 3: Inject endpoints
The next step after creating APIs is to inject endpoints. You can insert endpoints in your application by the below-written command.
Step 4: Configure the Store:
You can follow these steps to configure the store in a React native app, which is fairly easy to do. You must first create a store folder, inside of which you must also create an index.js file. Next, connect() sends the actions to the store to make the change and connects the components to the store.
Step 5: Using Dispatch Hook
You can also use the Redux RTK useDispatch hook to send actions that change the state. Here is the command to use useDispatch:
Lastly, we have to make a call to the getUser API through the redux-generated hook whenever the application is opened. This is effective, and we will get the desired response.
Now, we need to access the user data on another screen of our app without calling the API again (Redux should have cached or saved the data).
Final thoughts
In conclusion, Redux RTK is the best tool that can be used to easily access the state of your React Native app. It is a great alternative to building a custom Redux store that can help you keep your codebase cleaner and more organized. With Redux RTK, you can access the state of your React Native app with ease, allowing you to quickly access the data you need.