Setting up API Service via Redux for Data Retrieval from Backend

[Alina-Khmilevska]

We need to implement an API service that will execute requests to the backend to retrieve data. Ensure this service's integration with Redux to manage the app state.

Steps:

• Create an API service: Implement functions to perform GET, POST, PUT, DELETE requests to the backend.
• Create Redux actions: Develop actions to initiate the request, successfully receive a response, and handle any errors during the request.
• Create a Redux reducer: Develop a reducer that responds to the aforementioned actions and alters the state upon their invocation.
• Error Handling: Ensure proper error handling for failed requests and display appropriate messages to the user.

Acceptance Criteria:

• The API service correctly makes requests to the backend.
• Redux elements (actions, reducers) are correctly implemented and interact with the API service.
• Errors during fetching are properly handled and displayed to the user.

Notes:

• Clarify the API URL and the structure of the retrieved data.
• Pay attention to data security and request optimization.

[Alina-Khmilevska]

The Redux setup for API service integration is now complete, providing a robust and maintainable solution for data retrieval from the Drupal backend. This structure ensures scalability and ease of maintenance as the application grows and evolves.

Actions Taken:

1. Redux Store Setup: Initialized a Redux store with middleware and DevTools integration for an enhanced development experience.
2. Action Creators: Created asynchronous actions to handle API calls, with separate actions for request initiation, success, and failure to cleanly manage the different states of an API call.
3. Redux Thunk: Utilized Redux Thunk to write action creators that return a function instead of an action, allowing for delayed actions and conditional dispatching.
4. Custom Hook (useDataFetcher): Developed a reusable custom hook to abstract the data fetching logic, making it easier to reuse this functionality across different components.
5. Environment Variables: Configured the use of environment variables to manage the API URLs, ensuring that the API base path can be easily changed without code modifications.
6. Error and Loading UI: Implemented a common component to display loading and error states, improving the user experience and reducing repetitive code.
7. Separation of Concerns: Encapsulated API endpoints into a separate file for better maintainability and to avoid hardcoding URLs in action creators.
8. Documentation: Added comprehensive inline comments throughout the codebase to explain the functionality and usage of various parts of the Redux setup.