Redux Toolkit — bu Redux bilan ishlashni sezilarli darajada osonlashtiruvchi kutubxona bo‘lib, eng yaxshi amaliyotlarni taqdim etadi va dastur kodini qisqartirishga yordam beradi. Endi Redux Toolkit’ning so‘nggi versiyasini o‘rnatish va uni qanday ishlatishni bosqichma-bosqich ko‘rib chiqamiz.
1. Redux Toolkit va React-Redux’ni o‘rnatish
Dastlab, Redux Toolkit va React-Redux paketlarini o‘rnatishingiz kerak. Buning uchun npm
yoki yarn
paket menejerlaridan foydalanishingiz mumkin.
npm yordamida o‘rnatish:
npm install @reduxjs/toolkit react-redux
yarn yordamida o‘rnatish:
yarn add @reduxjs/toolkit react-redux
Bu buyruqlar sizga Redux Toolkit va React bilan ishlash uchun kerakli paketlarni o‘rnatadi.
2. Redux Toolkit bilan do‘kon yaratish
Keyingi bosqichda, biz configureStore
funksiyasi yordamida Redux do‘konini yaratamiz. Bu funktsiya Redux Toolkit’da standart bo‘lib, Redux do‘konini yaratishni osonlashtiradi.
store.js
faylida:
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
Bu yerda biz configureStore
orqali do‘kon yaratmoqdamiz va counterSlice
ni reducer sifatida qo‘shyapmiz. Redux Toolkit avtomatik ravishda zarur middleware’larni va Redux DevTools’ni o‘z ichiga oladi.
3. Slice yaratish
Redux Toolkit’da createSlice
yordamida bir joyda reducer va action’larni yaratish mumkin. Misol tariqasida oddiy counter slice yaratamiz.
counterSlice.js
faylida:
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
Bu yerda counterSlice
nomli slice yaratib, boshlang‘ich holat (initialState
) va uchta action (increment
, decrement
, incrementByAmount
) ni aniqlaymiz. Redux Toolkit immer
kutubxonasidan foydalanib, holatni o‘zgaruvchan holatda boshqaradi.
4. Redux do‘konini React ilovasiga bog‘lash
React ilovangizda Redux bilan ishlash uchun Provider
komponentidan foydalanib, do‘konni barcha komponentlarga taqdim etishingiz kerak.
index.js
yoki App.js
faylida:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Bu yerda Provider
Redux do‘konini React ilovasiga taqdim etadi va siz butun ilovada storedagi holat bilan ishlashingiz mumkin bo‘ladi.
5. React komponentida Redux Toolkit bilan ishlash
Endi React komponentida Redux Toolkit yordamida holatni boshqarishni ko‘ramiz. useSelector
va useDispatch
hooklaridan foydalanib, holatni olish va action’larni yuborish mumkin.
Counter.js
faylida:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';
function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(incrementByAmount(5))}>
Increment by 5
</button>
</div>
);
}
export default Counter;
Bu yerda:
useSelector
: Redux do‘konidancounter
qiymatini olish uchun ishlatiladi.useDispatch
:increment
,decrement
vaincrementByAmount
action’larini yuborish uchun ishlatiladi.
6. Asinxron ishlar (createAsyncThunk)
Agar siz API chaqiruvlari kabi asinxron ishlarga ehtiyoj sezsangiz, Redux Toolkit’da createAsyncThunk
funksiyasi mavjud. Bu funksiyani asinxron action
yaratish va boshqarish uchun ishlatishingiz mumkin.
Misol uchun, foydalanuvchi ma’lumotlarini API orqali olish uchun createAsyncThunk
dan foydalanamiz:
userSlice.js
faylida:
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const fetchUserById = createAsyncThunk(
'users/fetchById',
async (userId) => {
const response = await fetch(`/api/user/${userId}`);
return response.json();
}
);
const userSlice = createSlice({
name: 'users',
initialState: { user: null, status: 'idle' },
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUserById.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchUserById.fulfilled, (state, action) => {
state.user = action.payload;
state.status = 'succeeded';
})
.addCase(fetchUserById.rejected, (state) => {
state.status = 'failed';
});
},
});
export default userSlice.reducer;
Bu yerda:
fetchUserById
: Foydalanuvchini asinxron tarzda yuklaydigan thunk funksiyasi.pending
,fulfilled
,rejected
: Asinxron jarayonlarning holatlari avtomatik boshqariladi.
Yakuniy natija
Redux Toolkit yordamida React ilovasida holatni boshqarish juda oson. Toolkit Redux’ning murakkab qismlarini avtomatlashtiradi, kamroq kod yozishni talab qiladi va TypeScript bilan yaxshi integratsiya qilinadi. Keyingi postlarda batafsil tanishamiz.
Ulashish: