How do you handle multiple components showing the same dataset in your Redux store but filtering the dataset server-side?

I have a super simple question, but I can't figure out how to solve it "correctly" based on the Redux Code Structure documentation.

THE BACKEND

Imagine you have a list of TODOs in your database which is about 1TB in size.

• You have an API which can request TODOs and filter them by the date they were created.
• You can filter them using a date range: startDate and endDate

THE FRONTEND

There are two components which display these datasets on your frontend.

Component A

• Filters the TODOs by the date range ComponentAStartDate and ComponentAEndDate

Component B

• Filters the TODOs by the date range ComponentBStartDate and ComponentBEndDate

​

// store.js
export const store = configureStore({
  reducer: {
    todos: todosReducer,
    componentADateRange: componentADateRangeReducer,
    componentBDateRange: componentBDateRangeReducer,
  }
});

Our Reducer API request for TODOs might look like this:

// todosReducer.js
export function getTodos(params) {
    let queryString = (params !== undefined) ? Object.keys(params).map(key => key + '=' + encodeURIComponent(params[key])).join('&') : "";

    return fetch(`http://localhost:8080/todos?${queryString}`)
        .then(response => response.json())
        .then(json => json['todos']);
}


export async function fetchTodos(dispatch, getState) {
    dispatch(todosLoading());

    // HERE IS THE ISSUE
    await getTodos(getState().componentADateRange)
        .then(todos => dispatch(todosLoaded(todos)))
        .catch(error => {
            dispatch(todosLoadingError(error));
        });
}

So, there is the issue inside the fetchTodos function call. We are currently calling getState().componentADateRange however we now have ComponentB being added.

Bear in mind we have 1TB of TODOs. We cannot fetch all TODOs and then filter them client-side.