React Native
Slice
createSlice ile state slice öğrenirsin.
createSlice
createSlice, RTK'nın en önemli işlevidir. Bir slice; name, initialState ve reducers alanlarını içeren bir nesnedir. RTK, reducers içindeki her işlev için otomatik olarak action creator ve action type üretir. Böylece ayrı dosyalara gerek kalmaz.
Örnek: const counterSlice = createSlice({ name: 'counter', initialState: 0, reducers: { increment: (state) => state + 1 } }). counterSlice.actions.increment bir action creator'dır; counterSlice.reducer ise reducer'ın kendisidir. Slice, state'in bir parçasını ve onu değiştiren işlevleri bir arada tutar.
reducers alanı
reducers nesnesi, state'i değiştiren işlevleri listeler. Her işlev iki parametre alır: state ve action. RTK, immer kütüphanesini kullanarak state'i doğrudan değiştirebileceğin izlenimini verir; arka planda yine değiştirilemez (immutable) güncelleme yapar.
Örnek: increment: (state) => state + 1 veya addBy: (state, action) => state + action.payload. İkinci örnekte action.payload, dispatch sırasında gönderilen değeri taşır. RTK bu işlevi addBy(value) şeklinde çağırabilen bir action creator'a sarar.
Uygulama counterSlice yaz
Boş dosyayı tamamla. createSlice'ı @reduxjs/toolkit'ten içe aktar. counterSlice tanımla: name: 'counter', initialState: 0, reducers: { increment: (state) => state + 1, decrement: (state) => state - 1 }. export default counterSlice.reducer ve export const { increment, decrement } = counterSlice.actions yaz.
Örnek çözümü göster
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
},
});
export default counterSlice.reducer;
export const { increment, decrement } = counterSlice.actions;
Kendini test et
-
Slice adını yaz
createSlice({
name: '____',
initialState: 0,
reducers: {}
})
Cevabı göster
createSlice({
name: 'counter',
initialState: 0,
reducers: {}
})
-
Slice parçalarını eşle
- name
- Slice adı
- initialState
- Başlangıç değeri
- reducers
- Değiştirme işlevleri
- actions
- Action creator'lar
-
createSlice ne üretir?
- Hem reducer hem action creator
- Yalnızca reducer
- Yalnızca store
- Yalnızca style
Cevabı göster
Yalnızca reducer — createSlice hem reducer hem action creator üretir.
Sıradaki ders: useDispatch
