0

I'm trying to make redux dispatch action async using redux toolkit. I'm doing this to handle UI freeze caused due to redux state update (using setFilterInfo reducer).

While searching for a way to do it, I came across createAsyncThunk. However, all the examples showed its usage in respect of fetching data. I ended up with the following code. The problem is still not solved, UI is still freezing while updating the redux state.

// This is the Thunk
export const filterInfoSetterThunk = createAsyncThunk(
"screenSlice/setFilterInfo",
async (filter, thunkAPI) =\> {
return filter;
}
);


// Slice 
const screenSlice = createSlice({
  name: "screenSlice",

  initialState: {
    filter_info: []
  },
  reducers: {
    
    setFilterInfo(state, action) {
      state.filter_info = action.payload.filter_info;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(filterInfoSetterThunk.fulfilled, (state, action) => {
      console.log("Inside extra reducer", action.payload.filter_info);
      state.filter_info = action.payload.filter_info;
    });
  },
});

// calling filterInfoSetterThunk inside a function 

updateFilterInfoInReduxStore = async (data) => {
   await filterInfoSetterThunk({filter_info: data})
manmo
  • 13
  • 3

1 Answers1

0

You are calling await filterInfoSetterThunk({filter_info: data}) incorrectly here.

Instead of this dispatch(filterInfoSetterThunk({filter_info: data}))

Alpha
  • 1,413
  • 3
  • 9
  • 23
Saad Vakil
  • 1
  • 1
  • I've imported the thunk and created a dispatch dictionary like this ```const dispatch = { setScreenerQueryResponse, setSelectedMetrics, setScreenerFilter, setFilterInfo, filterInfoSetterThunk, };``` and then I'm passing this dictionary dictionary as a param to connect like this ```export default connect(mapStateToProps, dispatch)(CategoricalFilter)``` – manmo Oct 26 '22 at 20:37