React Redux Nedir ve Nasıl Kullanırsınız?

Redux, JavaScript uygulamalarının ön ucunda çalışan ve kullanıcı arabirimindeki her bileşenin durumunu yöneten parasız bir durum yönetim kitaplığıdır. Redux kitaplığı, bir uygulamadaki verileri yöneten ve depolayan kod ile vakaları ve bunların bir uygulamanın kullanıcı arabiriminin çeşitli bileşenleri üstündeki etkilerini yöneten kod içinde fark yapmayı kolaylaştırır.

Redux’un ana satış noktalarından biri esnek olmasıdır. Redux’ı neredeyse tüm JavaScript çerçeveleri yada kitaplıklarıyla kullanabilirsiniz.

Redux ekibi Redux, React-Redux ve Redux Toolkit olmak suretiyle üç kütüphane oluşturdu. Her üç kitaplık da React geliştirme deneyiminizden en iyi şekilde yararlanmak için beraber çalışır ve bu öğretici makalede bu tarz şeyleri iyi mi kullanacağınızı öğreneceksiniz.

React-Redux’un Önemi

Redux bağımsız bir devlet yönetim kitaplığı olmasına karşın, herhangi bir ön uç çerçevesi yada kitaplığıyla kullanmak bir UI bağlama kitaplığı gerektirir. UI bağlama kitaplığı, redux kitaplığına ön uç çerçevesini bağlayan evvel tanımlanmış bir takım adım olan durum kapsayıcısı (yada depolama) etkileşim mantığını işler.

React-Redux, React uygulamaları için resmi Redux UI bağlama kütüphanesidir ve Redux ekibi tarafınca korunur.

İlgili: JavaScript ile İlk React Uygulamanızı Oluşturma

Redux’u Proje Dizininize Yükleme

React uygulamanızda Redux kitaplığına erişmenin iki yolu vardır. Redux ekibi tarafınca tavsiye edilen yaklaşım, yeni bir React projesi oluştururken aşağıdaki komutu kullanmaktır:

npx create-react-app my-app --template redux

Yukarıdaki komut Redux Toolkit, React-Redux ve Redux deposunun otomatikman yapılandırılır. Sadece, Redux’u varolan bir React projesinde kullanmak istiyorsanız, Redux kitaplığını aşağıdaki komutla bağımlılık olarak yükleyebilirsiniz:

npm install redux

Arkasından React-Redux bağlama kullanıcı arabirimi kitaplığı:

npm install react-redux

Ve Redux vasıta seti:

npm install @reduxjs/toolkit

Redux Toolkit kitaplığı da önemlidir, zira Redux mağaza yapılandırma işlemini süratli ve kolay hale getirir.

Redux Mağazası Oluşturma

Redux kitaplığıyla çalışmaya başlamadan ilkin bir Redux durum kapsayıcısı (yada deposu) oluşturmanız gerekir. Bir Redux deposu oluşturmak gereklidir, zira genel Redux uygulama durumunu depolayan nesnedir.

React, bir çok ön uç çerçevesi şeklinde, uygulamalarında en üst düzeyde bir dosya yada dosya grubu olan bir giriş noktasına haizdir. Bu, bir sonraki dizin.html ve dizin.js dosyalar, bir React uygulamasının en üst düzeyinde bulunan ve Uygulama.js dosya ve uygulamadaki tüm bileşenler.

Doğrusu, dizin.js dosya bir Redux mağazası oluşturmak için ideal bir yerdir.

Redux Store ile dizin .js güncelleniyor

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import {configureStore} from "@reduxjs/toolkit"
import { Provider } from 'react-redux'
import user from './reducers/user'
const store = configureStore({
reducer:{
user
}
})
ReactDOM.render(


,
document.getElementById('root')
)
reportWebVitals();

Yukarıdaki kodda açmak için oldukca şey var, sadece adım atmak için en iyi yer configureStore fonksiyon. Redux Toolkit kütüphanesini yüklemenin faydalarını derhal configureStore işlevi, redux deposu yalnızca üç kod satırıyla oluşturur.

React uygulamanız Redux mağazasının sağlayıcı bileşeni, React-Redux bağlama kitaplığından gelir. Sağlayıcı bileşeni tek bir prop (mağaza) alır ve kendisini React uygulamasının etrafına sarıyor ve Redux mağazasını genel olarak erişilebilir hale getirir.

Üçüncü ve son yeni ithalat dizin.js yukarıdaki dosya kullanıcı azaltıcı, Redux mağazanızın emek vermesi için yaşamsal derecede önemlidir.

Redüktörü Niçin Önemlidir?

Bir redüktörün amacı, bir UI bileşeni durumu temel a meydana gelen fiil. Mesela, çevrimiçi bir okul uygulaması oluşturuyorsanız, oturum açma bileşenini kullanarak erişim elde etmek için her kullanıcının uygulamada oturum açmasını mecburi edersiniz. Bu uygulama için başka bir mükemmel bileşen, uygulamanızda oturum açtıklarında her kullanıcının adını yada e-posta adresini görüntüleyen etkin bir kullanıcı bileşenidir.

Yukarıdaki örnekte, etkin kullanıcı bileşeni, bir kullanıcı hesabında oturum açma eylemini her gerçekleştirişinde değişecektir. Bu örnek, bu yüzden, bir redüktörü için ideal bir durumdur. Bir redüktörün işlevini yalnızca herhangi bir bileşenin durumuna ve görevlerini yerine getirmek için gereksinim duyduğu eyleme erişmesini elde eden Redux mağazası sebebiyle gerçekleştirebileceğini anımsamak da önemlidir.

Kullanıcı Azaltıcı Oluşturma

import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: "user",
initialState: { value: {email: ""}},
reducers: {
login: (state, action) => {
state.value = action.payload
},
}
})
export const {login} = userSlice.actions
export default userSlice.reducer;

React’in içinde Src dizin bir redüktörü dizini, bu da sizin kullanıcı azaltıcı ve Redux mağazanıza eklemek istediğiniz öteki redükleyicileri. Bu, bir sonraki kullanıcı.js yukarıdaki dosyayı içe aktarır createSlice redux vasıta setinden çalışır.

Bu, bir sonraki createSlice işlevi kabul eder adBir başlangıç durumuve bir redüktörü nesnesi birden oldukca redükleyici işlevi depolar. Sadece, yukarıdaki redükleyiciler nesnesinin yalnızca bir redükleyici işlevi vardır. Oturum açma bir durumu ve eylemi bağımsız değişken olarak alır ve yeni bir durum döndürür.

Kullanıcının .js dosyası oturum açma azaltıcısını dışa aktarıyor. Oturum açma bileşeni onu alır ve useDispatch() kanca.

Oturum Açma BileşeniNi Oluşturma

import React from 'react';
import Bağlantı from '@mui/material/Bağlantı';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
function Signin() {
const dispatch = useDispatch()
const (email, setEmail) = useState('')
const handleSubmit = () => {
dispatch(login({email: email}))
}

return (

);
}
export default Signin;

Yukarıdaki oturum açma bileşeni MUI kitaplığını kullanır. Kullanıcının e-postasını ve parolasını gerektiren rahat bir oturum açma formu oluşturur. Oturum açma düğmesini tıklatma, onClick işlevi, handleSubmit fonksiyon.

Bu, bir sonraki handleSubmit işlevi, useState() ve useDispact() kancaları ile beraber oturum açma azaltıcısı etkin bir kullanıcının e-posta adresini Redux mağazasında kullanılabilir hale getirmek için. Redux mağazasından, React uygulamasındaki her bileşen artık etkin bir kullanıcının e-postasına erişebilir.

İlgili: Kancalar: Tepki Kahramanı Aşağıdaki etkin kullanıcı bileşeni, etkin bir kullanıcının e-posta adresini useSelector() kancası ve uygulama kullanıcı arabirimine işler.

ActiveUser.js Dosyası

import React from "react";
import { useSelector } from "react-redux";

function ActiveUsers() {
const user = useSelector((state) => state.user.value)
return (

);
}

Güncelleştirilmiş Uygulama.js Dosyası

Şu kod parçasına bir göz atın:

import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin";
function App() {
return (

);
}
export default App;

Bu, bir sonraki Uygulama.js yukarıdaki dosya, Tarayıcınızda aşağıdaki çıktıyı oluşturarak React uygulamanızdaki hem etkin kullanıcıları hem de oturum açma bileşenlerini işler:

Bir kullanıcı uygulamada oturum açarsa, etkin kullanıcılar bileşeni derhal yeni bir etkin kullanıcı e-postasıyla güncellenir.

Güncelleştirilmiş Kullanıcı Arabirimi

Redux’yi Ne Vakit Kullanmalısınız?

Redux, en popüler devlet yönetim kütüphanelerinden biridir, zira öngörülebilir ve güvenilir kod oluşturma mevzusunda muhteşem bir iş çıkarır. Bir uygulamadaki birçok bileşen aynı uygulama durumunu kullanıyorsa, Redux ideal seçimdir.

Yukarıdaki okul örneğini kullanarak, oturum açma bileşeni, etkin kullanıcı bileşeni, derslik katılımcısı bileşeni ve hatta bir profil bileşeninin bir kullanıcının e-posta adresine (yada başka bir benzersiz tanımlayıcıya) ihtiyacı olacaktır. İşte bu yüzden Redux buradaki en iyi seçenek.

Sadece, en fazla bir yada iki bileşen tarafınca kullanılan bir durumunuz var ise, daha iyi bir seçenek React props olabilir.