"createApi" is used to define the configuration of the API. reducerPath sets the path in the Redux store where data from this API will be stored.
baseQuery is initialized with backendBaseQuery(), configuring basic request details like the base URL or HTTP headers.
"endpoints" defines the different endpoints of the API. Here, a single endpoint getEmissionRanges is defined for retrieving emission ranges.
The query is a function that takes a request of type EmissionRangesRequest and returns the URL and method for the API request.
"transformResponse" is used to transform the server response before it's processed by the rest of the application. Here, it appears the response is an array, and the function simply returns the first item.
Custom Hooks:
"useGetEmissionRangesQuery" and "useLazyGetEmissionRangesQuery" are hooks automatically generated by Redux Toolkit for interacting with the getEmissionRanges endpoint. These hooks can be used in React components to trigger the query and manage the request state (such as loading, data, and errors).
In the file "NetworkIndicator.tsx".
The API call are mainly made in the file "NetworkIndicator.tsx". You can see the code
that are polling the API. We can use "skipPollingIfUnfocused: true" to stop polling if window is not focused.
When you use the "useGetEmissionRangesQuery" hook with the "pollingInterval" option in Redux Toolkit Query, the Redux store is updated each time the query successfully fetches new data from the API. The "pollingInterval" option you've set to 10000 means that the API will be polled every 10,000 milliseconds (or every 10 seconds), as long as the component where this hook is used remains mounted and the browser tab is focused, due to the "skipPollingIfUnfocused: true" setting.
Here’s how it works:
Triggering Requests: The useGetEmissionRangesQuery hook automatically triggers a request to fetch data using the provided requestParams when the component mounts or when the requestParams change.
Polling: With the pollingInterval option, after the initial fetch, the hook will continue to make requests at the specified interval (every 10 seconds in this case). This is useful for keeping the data in your application up-to-date without requiring user interaction to refresh the data.
Skipping Polling When Unfocused: The skipPollingIfUnfocused option optimizes resource usage by stopping the polling when the user navigates away from the page (i.e., when the browser tab or window is not focused). This reduces unnecessary network requests and processing when the data isn't being actively viewed.
Store Updates: Each time the query fetches new data, the Redux store is automatically updated. The state slice managed by Redux Toolkit Query includes the status of the request (loading, success, error), the data returned, and the time of the last successful fetch. This allows your React components to reactively update and display the latest data without manual state management.
Reacting to Updates: Components using this hook will re-render when the relevant slice of the Redux store updates, ensuring your UI reflects the most current state of the data.
Assessment to update only one chart
What should be done :
We should have a separate state for each chart, since each displayed data must be different. Each component would be able to fetch its own data from the API, format it, and display it. It's necessary to separate because the displayed data depends on parameters like the time range and the step that are unique for each chart. That implies managing multiple state on frontend side. The user must see the data fetched if he interacts with one chart and select a time range.
What is the currently done :
For the moment, there is only one state for all the charts and there is no data fetching when the user change the time range or step.
Documentation / assessment in response of #31
In file EmissionRangesClient.ts
Creation of the emissionRangesApi:
Custom Hooks:
In the file "NetworkIndicator.tsx".
The API call are mainly made in the file "NetworkIndicator.tsx". You can see the code
and
that are polling the API. We can use "skipPollingIfUnfocused: true" to stop polling if window is not focused.
When you use the "useGetEmissionRangesQuery" hook with the "pollingInterval" option in Redux Toolkit Query, the Redux store is updated each time the query successfully fetches new data from the API. The "pollingInterval" option you've set to 10000 means that the API will be polled every 10,000 milliseconds (or every 10 seconds), as long as the component where this hook is used remains mounted and the browser tab is focused, due to the "skipPollingIfUnfocused: true" setting.
Here’s how it works:
Triggering Requests: The useGetEmissionRangesQuery hook automatically triggers a request to fetch data using the provided requestParams when the component mounts or when the requestParams change.
Polling: With the pollingInterval option, after the initial fetch, the hook will continue to make requests at the specified interval (every 10 seconds in this case). This is useful for keeping the data in your application up-to-date without requiring user interaction to refresh the data.
Skipping Polling When Unfocused: The skipPollingIfUnfocused option optimizes resource usage by stopping the polling when the user navigates away from the page (i.e., when the browser tab or window is not focused). This reduces unnecessary network requests and processing when the data isn't being actively viewed.
Store Updates: Each time the query fetches new data, the Redux store is automatically updated. The state slice managed by Redux Toolkit Query includes the status of the request (loading, success, error), the data returned, and the time of the last successful fetch. This allows your React components to reactively update and display the latest data without manual state management.
Reacting to Updates: Components using this hook will re-render when the relevant slice of the Redux store updates, ensuring your UI reflects the most current state of the data.
Assessment to update only one chart
What should be done :
We should have a separate state for each chart, since each displayed data must be different. Each component would be able to fetch its own data from the API, format it, and display it. It's necessary to separate because the displayed data depends on parameters like the time range and the step that are unique for each chart. That implies managing multiple state on frontend side. The user must see the data fetched if he interacts with one chart and select a time range.
What is the currently done :
For the moment, there is only one state for all the charts and there is no data fetching when the user change the time range or step.