I am currently facing an issue while trying to fetch a single resource (one to-do) from my backend. I am struggling to set up my store in the frontend and cannot seem to find the req.params.id as I would typically do with regular Javascript + Redux thunks. I referred to some documentation at https://redux-toolkit.js.org/api/createAsyncThunk and attempted to replicate it in my todoSlice file. However, I encountered the following error: "Argument of type '(todoId: string, thunkApi: GetThunkAPI<{}>) => Promise' is not assignable to parameter of type 'AsyncThunkPayloadCreator<Todo, void, {}>'. Types of parameters 'todoId' and 'arg' are incompatible. Type 'void' is not assignable to type 'string'." I am uncertain about how to retrieve the id from parameters using Typescript and would greatly appreciate any assistance. I have provided the current setup of my files below:
On the left side: my client-side thunk. On the right side: my backend server controller. https://i.sstatic.net/3upv1.png
This is my todoSlice code:
interface TodoState {
todos: Todo[] | null;
isFetching: boolean;
singleTodo: Todo | null;
errors: any;
}
export const getOneTodo = createAsyncThunk<Todo>(
'TODO/FETCHONE',
async(data, thunkApi) => {
try {
const res = await axios.get(`http://localhost:5001/api/todos/`);
thunkApi.dispatch(getOneTodo());
return res.data;
} catch(e) {
return thunkApi.rejectWithValue(e)
}
}
);
Below is my todo router controller:
// get one to-do
export const getTodo = async (req: Request, res: Response) => {
try {
const task = await Todo.findById(req.params.id);
res.status(200).json(task);
} catch(e) {
res.status(500).json({ err: e });
}
};