Can anyone Fix the Redux Slice

TechOverflow

Home

Community

Collections

Find Jobs

Popular Tags

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 response = axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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;
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 response = axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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;
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 response = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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; // ✅ Use `.message` to get the error string
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 response = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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; // ✅ Use `.message` to get the error string
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 response = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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; // ✅ Use `.message` to get the error string
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 response = await axios.get('https://jsonplaceholder.typicode.com/posts');
7  return response.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; // ✅ Use `.message` to get the error string
30      });
31  }
32});
33
34export default postsSlice.reducer;
35

1const response = await axios.get(...)

1const response = await axios.get(...)

Top Questions

Popular Tags

Can anyone Fix the Redux Slice

Question:

🔍 Hint:

✅ Expected Output:

2 Answers

What Was Fixed

Write your answer