如何将商店连接到异步Redux操作

Question

I have an async action fetchTasks which is given a list of tasks, and sends a request for each task (these may or may not take a while to finish). I want my front end to only be able to send 5 requests at a time. Since many components have Ajax functionality, I decided to implement the request counter within the redux store. The value is called fetchCount , and is used by many components to see if they want to allow the user to send a request.

Now the issue is fetchTasks can get more than 5 tasks in the task list. I've dealt with that by first sending requests until the fetchCount reaches 0, then I recursively call fetchTasks whenever a server response is received for a fetch.

function fetchTasks(taskList){
    return dispatch => {
         while(taskList.length > 0 && fetchCount > 0){ // <-- I need fetchCount to be up to date with the store
           decrementFetchCount(); //a redux action
           let task = taskList.pop();
           $ajax({
               url: `/do/${task}`,
               success:(data)=>{
                 processData(data); // redux action
                 incrementFetchCount(); // a redux action
                 dispatch(fetchTasks(taskList));
                } 
            });
        }
    }
}

My issue is that I need fetchTasks to be aware of the value of fetchCount at any point in its run time. I'm thinking that connecting it to the store is the key, but I don't know how to connect a function to the store. Therein lies the problem. Also, this smells. If someone has an alternative way to implement this that they want to suggest, that would also be a valid answer.

Answer 1

I'm assuming this is using redux-thunk . You can have a second paramenter getState together with dispatch .

You fetchTasks would look something like this...

function fetchTasks(taskList) {
    return (dispatch, getState) => {
        while (taskList.length > 0 && getState().fetchCount > 0) {
        ...
    }
}