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

TechOverflow

Home

Community

Collections

Find Jobs

Tags

Ask a question

Top Questions

Can anyone Fix the Redux Slice

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

how does the node.js event loop work???

Java is a great programming language to develop mobile application

How can I optimize database queries for better performance in a high-traffic web application?

Popular Tags

5

4

2

2

2

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

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

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