Wysyłanie danych za pomocą thunk w Redux

Na poprzednich zajęciach zajmowaliśmy się obsługą żądania POST na naszym fałszywym serwerze. Teraz napiszmy funkcję thunk, która będzie wysyłać żądanie do serwera.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Teraz po thunk fetchProducts za pomocą createAsyncThunk utwórzmy thunk addProduct:

export const addProduct = createAsyncThunk()

Pierwszym parametrem przekażemy do createAsyncThunk 'products/addProduct', a drugim asynchroniczne wywołanie zwrotne, które będzie przyjmować obiekt z danych nowego produktu:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

W kodzie tego wywołania zwrotnego wywołamy klienta, przekazując mu parametry ścieżkę i obiekt z produktem, a następnie zwrócimy dane odpowiedzi:

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

Teraz poniżej w kodzie spójrzmy na pole reducers dla productsSlice. Wcześniej dodawaliśmy nowy produkt za pomocą reduktora productAdded, w którym mieliśmy metody reducer i prepare. Teraz generujemy niezbędne dane na serwerze i pracujemy z thunk, więc usuniemy tutaj całkowicie reduktor productAdded z kodu. A następnie dodamy do metody extraReducers (na końcu jego kodu) jeszcze jeden dodatkowy reduktor, który w przypadku udanego żądania będzie dodawał do slice'a products nowy produkt prosto z payload akcji (pamiętajmy, że taki kod jest możliwy dzięki niepowtarzalnemu createSlice):

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

Tak, przy okazji, nie zapomnij usunąć nanoid z linii importu, a productAdded z eksportu akcji na końcu pliku.

Otwórz swoją aplikację ze studentami. Otwórz w niej plik studentsSlice.js. Za pomocą createAsyncThunk utwórz kolejny thunk addStudent, który będzie wysyłał żądanie POST na serwer, aby dodać nowego studenta, jak pokazano na lekcji.

Następnie poniżej wprowadź zmiany dla studentsSlice: usuń całkowicie reduktor studentAdded we właściwości reducers. A w polu extraReducers dodaj dodatkowy reduktor, który będzie dodawał nowego studenta do slice'a students z payload akcji w przypadku udanego żądania, jak pokazano na lekcji.