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:

export 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:

export 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:

export 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):

.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.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor studentsSlice.js. Pomocí createAsyncThunk vytvořte další thunk addStudent, který bude odesílat POST požadavek na server, aby přidal nového studenta, jak je ukázáno v lekci.

Dále níže proveďte změny pro studentsSlice: úplně odstraňte reducer studentAdded ve vlastnosti reducers. A v poli extraReducers přidejte dodatečný reducer, který bude přidávat nového studenta do slice students z payload akce v případě úspěšného požadavku, jak je ukázáno v lekci.