Özet - State yönetimi
- React Native kursu
- İleri seviye
- Ders 54/83
- 5 dk
createSlice, useDispatch ve useSelector'ı birleştirerek bir sayaç yazarsın.
Özet - State yönetimi
Bu grupta Redux, Redux Toolkit, createSlice, useDispatch ve useSelector öğrendik. configureStore store oluşturur; createSlice reducer ve action creator üretir. useDispatch action gönderir; useSelector state okur.
Şimdi bunları birleştirip çalışan bir sayaç yazacağız. Önce slice tanımlanır, sonra store kurulur, son olarak bileşen dispatch ile artırır ve useSelector ile değeri gösterir. Bu kalıp tüm Redux uygulamalarının iskeletidir.
Uygulama Özet - Counter slice
counterSlice tanımla. createSlice ile name: 'counter', initialState: { value: 0 }, reducers: { increment, decrement }. Reducer'ı export default, action'ları export const ile dışa aktar.
Başlangıç kodu
import { createSlice } from '@reduxjs/toolkit';
// counterSlice'i tanımlaÖrnek çözüm
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});
export default counterSlice.reducer;
export const { increment, decrement } = counterSlice.actions;Uygulama Özet - Counter bileşeni
Counter bileşenini tamamla. useSelector((state) => state.counter.value) ile değeri oku. useDispatch ile dispatch(increment()) çağır. <Text>{count}</Text> ve artırma butonu döndür.
Başlangıç kodu
import React from 'react';
import { Button, Text, View } from 'react-native';
export function Counter() {
// count ve dispatch al; Text ve Button döndür
return null;
}Örnek çözüm
import React from 'react';
import { Button, Text, View } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';
export function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<View>
<Text>{count}</Text>
<Button title="Artir" onPress={() => dispatch(increment())} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Akış parçalarını eşle
| Kavram | Anlamı |
|---|---|
createSlice |
Slice üretir |
configureStore |
Store kurar |
useDispatch |
Action gönderir |
useSelector |
State okur |
2 Slice name değerini yaz
const counterSlice = createSlice({
name: '____',
initialState: { value: 0 },
reducers: {}
});const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {}
});Açıklama: counter yazılır; createSlice'ın name alanı budur.