I am a beginner when it comes to using TypeScript with Redux Toolkit and I have encountered an issue with addCase not being available on the builder callback function in my extraReducers. I haven't been able to find a similar situation online, and I suspect that I might be overlooking something very simple. However, despite my efforts, I can't seem to pinpoint the problem.
Below is my createAsyncThunk:
type myData = object[]
export const fetchResults = createAsyncThunk
(
"search/fetchResults", async (searchTerm: string) => {
try {
const url:string = `https://www.googleapis.com/books/v1/volumes?q=${searchTerm}keyes&key=${process.env.REACT_APP_MY_API_KEY}`
const response = await axios.get(url);//where you want to fetch data
return (await response.data()) as myData;
} catch (error) {
return error
}
});
And here is my slice with extraReducers:
interface searchInterface {
field: string
result: object[]
loading: 'idle' | 'loading' | 'loaded' | 'failed'
}
const initialState: searchInterface = {
field: "",
result: [],
loading:"idle"
}
const searchSlice = createSlice({
name: 'search',
initialState,
reducers: {
fieldChange(state, action: PayloadAction<string>)
{
state.field = action.payload
},
extraReducers: (builder) => {
builder.addCase(fetchResults.pending, (state: searchInterface) => {
state.result = [];
state.loading = "loading";
});
builder.addCase(
fetchResults.fulfilled, (state: searchInterface, action:PayloadAction<object[]>) => {
state.result = action.payload;
state.loading = "loaded";
});
builder.addCase(
fetchResults.rejected, (state: searchInterface) => {
state.loading = "failed";
});
}
}
})
All of the .addCase properties are triggering an error: https://i.sstatic.net/hzHy0.png
Is there something obvious that I am overlooking?