I made a simple React component that fetch data using the Redux toolkit. Can anyone debug this code?

TechOverflow

Home

Community

Collections

Find Jobs

I made a simple React component that fetch data using the Redux toolkit. Can anyone debug this code?

Asked 236 days ago

2 Answeres

172 Views

Here is the code that not working correctly. Can anyone debug this code and make it work perfectly? Thank you.

1// src/features/posts/postsSlice.js
2import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
3import axios from 'axios';
4
5export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
6  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return res.data;
8});
9
10const postsSlice = createSlice({
11  name: 'posts',
12  initialState: {
13    items: [],
14    status: 'idle',
15    error: null
16  },
17  reducers: {},
18  extraReducers: builder => {
19    builder
20      .addCase(fetchPosts.pending, state => {
21        state.status = 'loading';
22      })
23      .addCase(fetchPosts.fulfilled, (state, action) => {
24        state.status = 'succeeded';
25        state.items = action.payload;
26      })
27      .addCase(fetchPosts.rejected, (state, action) => {
28        state.status = 'failed';
29        state.error = action.error.message;
30      });
31  }
32});
33
34export default postsSlice.reducer;
35

1// src/features/posts/postsSlice.js
2import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
3import axios from 'axios';
4
5export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
6  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return res.data;
8});
9
10const postsSlice = createSlice({
11  name: 'posts',
12  initialState: {
13    items: [],
14    status: 'idle',
15    error: null
16  },
17  reducers: {},
18  extraReducers: builder => {
19    builder
20      .addCase(fetchPosts.pending, state => {
21        state.status = 'loading';
22      })
23      .addCase(fetchPosts.fulfilled, (state, action) => {
24        state.status = 'succeeded';
25        state.items = action.payload;
26      })
27      .addCase(fetchPosts.rejected, (state, action) => {
28        state.status = 'failed';
29        state.error = action.error.message;
30      });
31  }
32});
33
34export default postsSlice.reducer;
35

React

redux

javascript

2 Answers

Mirza Alamin

• answered 233 days ago

Debug This Redux Code

You're using Redux Toolkit to fetch posts. The code below doesn't work as expected — the state doesn't update and errors aren't shown properly.

1import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
2import axios from 'axios';
3
4export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
5  const res = axios.get('https://jsonplaceholder.typicode.com/posts');
6  return res.data;
7});
8
9const postsSlice = createSlice({
10  name: 'posts',
11  initialState: {
12    items: [],
13    status: 'idle',
14    error: null
15  },
16  reducers: {},
17  extraReducers: builder => {
18    builder
19      .addCase(fetchPosts.pending, state => {
20        state.status = 'loading';
21      })
22      .addCase(fetchPosts.fulfilled, (state, action) => {
23        state.status = 'succeeded';
24        state.items = action.payload;
25      })
26      .addCase(fetchPosts.rejected, (state, action) => {
27        state.status = 'failed';
28        state.error = action.error;
29      });
30  }
31});
32
33export default postsSlice.reducer;
34

1import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
2import axios from 'axios';
3
4export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
5  const res = axios.get('https://jsonplaceholder.typicode.com/posts');
6  return res.data;
7});
8
9const postsSlice = createSlice({
10  name: 'posts',
11  initialState: {
12    items: [],
13    status: 'idle',
14    error: null
15  },
16  reducers: {},
17  extraReducers: builder => {
18    builder
19      .addCase(fetchPosts.pending, state => {
20        state.status = 'loading';
21      })
22      .addCase(fetchPosts.fulfilled, (state, action) => {
23        state.status = 'succeeded';
24        state.items = action.payload;
25      })
26      .addCase(fetchPosts.rejected, (state, action) => {
27        state.status = 'failed';
28        state.error = action.error;
29      });
30  }
31});
32
33export default postsSlice.reducer;
34

Let me know if you want the fixed version too!

minhazul jeson

• answered 234 days ago

✅ Your code is correct and follows best practices for using Redux Toolkit with createAsyncThunk and createSlice.

But let me give you a quick code review to confirm everything and suggest a few optional improvements:

🔍 Your Code Review (Line by Line)

1. Async Thunk is well defined

1export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
2  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
3  return res.data;
4});
5

1export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
2  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
3  return res.data;
4});
5

✅ This is perfectly fine. You're using createAsyncThunk correctly.