Slice
- React Native kursu
- İleri seviye
- Ders 51/83
- 5 dk
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.
Başlangıç kodu
import { createSlice } from '@reduxjs/toolkit';
// counterSlice'i tanımla ve dışa aktarÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Slice adını yaz
createSlice({
name: '____',
initialState: 0,
reducers: {}
})createSlice({
name: 'counter',
initialState: 0,
reducers: {}
})Açıklama: counter yazılır; slice'ın name alanı budur.
2 Slice parçalarını eşle
| Kavram | Anlamı |
|---|---|
name |
Slice adı |
initialState |
Başlangıç değeri |
reducers |
Değiştirme işlevleri |
actions |
Action creator'lar |
3 createSlice ne üretir?
- Hem reducer hem action creator
- Yalnızca reducer Doğru cevap
- Yalnızca store
- Yalnızca style
Açıklama: createSlice hem reducer hem action creator üretir.