Redux е open-source JavaScript библиотека која се користи за менаџирање и централизирање на апликациската состојба. Во продолжение 5 поважни карактеристики на Redux:
- Централизирано управување со состојбата: Redux овозможува управување на состојбата на апликацијата во централизирана локација наречена ‘store’. Ова овозможува полесно управување и ажурирање на состојбата, кое што допринесува за поедноставување на кодот.
- Предвидливо управување со состојбата: Redux следи еднонасочен проток на податоци, кое што го олеснува предвидувањето и разбирањето како се менува состојбата на апликацијата.
- Одвојување на загриженоста: Redux ја оделува логиката на управувањето со состојбата од логиката на компонентата, ова допринесува компонентите да бидат поупотребливи и полесно да се пишуваат автоматски тест примери.
- Алатки за девелопери: Redux овозможува голем број на алатки за девелопери кои можат да помогнат за дебагирање и оптмизирање на апликацијата. Овие алатки овозможуваат следење на состојбата, визуелизирање на состојбата и акциите на апликацијата, дури и патување низ времето на истиријата на апликацијата.
- Голем екосистем: Redux има голем и активен екосистем на библиотеки и алатки кои овозможуваат градење на комплексни апликации. Ова вклучува библиотеки за справување на асинхрони акции, интеграција со React и други популарни рамки и библиотеки.
Во продолжение, еден пример за примената на Redux во React:
Во овој пример ќе креираме едноставна апликација, чија функиција е да додава и брише елементи(продукти) од шопинг картичка.
Чекор 1: Најпрвин мора да ги инсталираме потребните Redux пакети со командата
npm install react react-dom redux react-reduxЧекор 2: Креираме JavaScript фајл ‘store.js’
import { createStore } from 'redux';
// Define the initial state
const initialState = {
items: [],
};
// Define the reducer function
function reducer(state = initialState, action) {
switch (action.type) {
case 'ADD_ITEM':
return {
...state,
items: [...state.items, action.payload],
};
case 'REMOVE_ITEM':
return {
...state,
items: state.items.filter(item => item.id !== action.payload),
};
default:
return state;
}
}
// Create the Redux store
const store = createStore(reducer);
export default store;Во овој код се креира Redux store користејќи ‘createStore’ функција од ‘redux’ библиотеката. Исто така се дефинира и иницијалната состојба на store со празна низа ‘items’. Дефинирана е и функцијата reducer која што ги зема моменталната состојба и акцијата како влени параметри, а враќа ажурирана состојба според типот на акцијата.
Чекор 3: Креираме JavaScript фајл ‘actions.js’
let nextItemId = 0;
export function addItem(name, price) {
return {
type: 'ADD_ITEM',
payload: {
id: nextItemId++,
name,
price,
},
};
}
export function removeItem(id) {
return {
type: 'REMOVE_ITEM',
payload: id,
};
}
Овој код дефинира две функции кои што креираат Redux акции: ‘addItem’ и ‘removeItem’.
Чекор 4: Креираме JavaScript фајл ‘App.js’ со следниов код:
import {useState} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {addItem, removeItem} from './actions';
import style from './App.css'
function App() {
const [name, setName] = useState('');
const [price, setPrice] = useState('');
const items = useSelector(state => state.items);
const dispatch = useDispatch();
function handleAddItem(e) {
e.preventDefault();
dispatch(addItem(name, price));
setName('');
setPrice('');
}
function handleRemoveItem(id) {
dispatch(removeItem(id));
}
return (
<div>
<h1>Shopping Cart</h1>
<form onSubmit={handleAddItem}>
<label>
Name:
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
</label>
<br/>
<label>
Price:
<input
type="text"
value={price}
onChange={e => setPrice(e.target.value)}
/>
</label>
<br/>
<button type="submit">Add Item</button>
</form>
<ul>
{items.map(item => (
<li key={item.id}>
{item.name} - ${item.price}
<button onClick={() => handleRemoveItem(item.id)}>Remove</button>
</li>
))}
</ul>
</div>
);
}
export default App;
Ова е апликација React која користи React hooks и Redux за управување со состојбата. ‘useState‘ hook се користи за креирање на ‘name‘ и ‘price‘ на локалните променливи на состојбата, а ‘useSelector’ и ‘useDispatch’ hooks од библиотеката ‘react-redux‘ се користат за поврзување со Redux store.
Функцијата ‘handleAddItem‘ се повикува кога се поднесува формуларот, кој испраќа дејство ‘addItem‘ со тековните вредности на ‘name ‘ и ‘price‘, а потоа ги ресетира променливите на состојбата. Функцијата ‘handleRemoveItem‘ се повикува кога се кликнува на копчето “Remove“ на ставка, што испраќа дејство removeItem со ID на ставката.
Предметите во картичката се прикажуваат во неподредена листа со помош на ‘map‘ за итерирање преку низата на ‘items‘ од Redux store, а функцијата ‘handleRemoveItem‘ се пренесува како повратен повик до копчето “Remove“.
Чекор 5: Креираме JavaScript фајл ‘index.js’
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')
);
Чекор 6: За подобар изглед, ќе додаме и CSS код, достапен на следниов линк.
Чекор 7: го стартуваме развојниот сервер со командата npm start. Доколку успешно ги имате извршено сите претходни чекори, резлутатот на екранот е следниов:
Целиот код е достапен на следниов линк.
Што понатаму?
Следете го IT.mk и наското ќе ги објавиме преостанатите туторијали за React.
Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!
Доколку веќе имаш премиум членство, најави се тука.
