I have implemented the best practices of separation of concerns and utilized the saga pattern design to handle side effects.
Create a simple React Native application that displays a list of products fetched from any API. The app should have two screens: product list and product details. When the user taps on a product item, the app should navigate to the product details screen and display its details..
The task description outlines the creation of an application that interacts with an API. This API provides an array of objects, each including product details like title, description, image, and price. However, what if we aim to enhance this project professionally by integrating advanced techniques such as employing a side effect library like Saga, alongside Redux and React Query? While this might appear excessive for the scope of this assessment, the objective is to demonstrate our capability to develop a real-world application to the hiring manager. Let's embrace the challenge and proceed.
saga pattern is a sequence of transactions that updates each service and publishes a message or event to trigger the next transaction step. Heere is the design of implementing saga pattern design:
The above two screenshots shows how we utilized saga pattern design within our project . Saga yields pure objects called effects. Effect is simple javascript object that contains commands that will be executed by a middleware. What are these commands? Commands involve actions like invoking asynchronous functions, dispatching an action to the store, etc. Redux-saga provides some helper effects wrapping internal functions to spawn tasks when some specific actions are dispatched to the Store . source : https://medium.com/nerd-for-tech/saga-pattern-971d59be3722
- Redux-toolkit 3 Redux-Saga
- Interactive UI
- react-native-paper
- React Query
- React Navigation
yarn install
expo start| Home Page | Home Page | Details |
|---|---|---|
 |
 |
 |