Odesílání dat pomocí thunk v Redux

V minulé lekci jsme probrali zpracování POST požadavku na našem falešném serveru. Pojďme nyní napsat thunk funkci, která bude odesílat požadavek na server.

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Nyní po thunk fetchProducts pomocí createAsyncThunk vytvoříme thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Jako první parametr předáme do createAsyncThunk 'products/addProduct', a jako druhý asynchronní callback, který bude přijímat objekt s daty nového produktu:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

V kódu tohoto callbacku zavoláme klienta, předáme mu parametry cestu a objekt s produktem, a poté vrátíme data odpovědi:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {
    const response = await client.post('/fakeServer/products', newProduct)
    return response.data
  }
)

Nyní níže v kódu se podíváme na pole reducers pro productsSlice. Dříve jsme přidávali nový produkt pomocí reduceru productAdded, ve kterém jsme měli metody reducer a prepare. Nyní generujeme potřebná data na serveru a pracujeme s thunk, proto zde úplně odstraníme reducer productAdded z kódu. A poté přidáme do metody extraReducers (na konec jeho kódu) další dodatečný reducer, který v případě úspěšného požadavku přidá do slice products nový produkt přímo z payload akce (pamatujeme, že takový kód je možný pouze díky jedinečnému createSlice):

products/productsSlice.js.addCase(addProduct.fulfilled, (state, action) => {
  state.products.push(action.payload)
})

Ano, mimochodem, nezapomeňte odstranit nanoid z řádků s importem, a productAdded z exportu akcí na konci souboru.