Datan Hakeminen CreateAsyncThunkilla

Mitä rakennat

Tietojen haku API:sta Redux Toolkitiä käyttäen.

Asynkronisen toiminnon luominen

Redux Toolkit tarjoaa createAsyncThunk-funktion asynkronisen logiikan käsittelyyn.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    return response.json();
  }
);

Yhdistäminen sliceen

Asynkronisen toiminnon käsittely slicessa:

import { createSlice } from '@reduxjs/toolkit';
import { fetchPosts } from './postsThunk';

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    items: [],
    status: 'idle',
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default postsSlice.reducer;

createAsyncThunk mahdollistaa asynkronisen logiikan hallinnan rakenteellisesti. Se seuraa automaattisesti lataus-, onnistumis- ja virhetiloja.