REACT-REDUX ‒ STATE-МЕНЕДЖЕР ДЛЯ REACT JS - Наукові конференції
Головна
UA RU EN

Вас вітає Інтернет конференція!

Вітаємо на нашому сайті

Рік заснування видання - 2011

REACT-REDUX ‒ STATE-МЕНЕДЖЕР ДЛЯ REACT JS

24.09.2022 18:34

[1. Інформаційні системи і технології]

Автор: Кіш Віктор Вікторович, студент, Державний вищий навчальний заклад «Ужгородський національний університет», м. Ужгород; Йовбак Ніка Ігорівна, студентка, Державний вищий навчальний заклад «Ужгородський національний університет», м. Ужгород


Redux — відкрита JavaScript бібліотека, котра призначена для керування станом програм Java Script. Найчастіше її використовують разом з React з метою побудови інтерфейсів користувача.

Redux зберігає стан всього застосунку в дереві об'єктів в одному сховищі. Одне дерево станів полегшує налагодження або перевірку програми. Це також дозволяє зберігати state додатку під час розробки, для прискорення циклу розробки.

Store — це об'єкт, який з'єднує actions, які представляють факт того, що «щось сталося» і reducers, які оновлюють state відповідно до цих actions разом.

 - Store містить стан додатку (application state);

 - надає доступ до стану за допомогою getState()

 - може випускати оновлення стану за допомогою dispatch(action)

 - обробляє скасування реєстрації слухачів за допомогою функції, що   повертається subscribe(listener).

Давайте розглянемо приклад використання React-Redux на прикладі додатку з обробкою даних користувачів:

Таким чином ми організовуємо reducer:

const initialState = {

    users: [],

    loading: false,

    error: null,

}

export const userReducer = (state = initialState, action) => {

    switch(action.type){

        case UserActionTypes.FETCH_USERS:

            return {...state, loading: true}

        case UserActionTypes.FETCH_USERS_SUCCESS:

            return {...state, beers: action.payload, loading: false}

        case UserActionTypes.FETCH_USERS_ERROR:

            return {...state, error: action.payload, loading: false}

        default:

            return state

    }}

Так ми реалізуємо action:

export const fetchUser = () => {

    return async (dispatch) => {

        try{

            dispatch({type: UserActionTypes. FETCH_USERS })

            const response = await axios.get(' https://jsonplaceholder.typicode.com/users ')

            dispatch({type: UserActionTypes. FETCH_USERS_SUCCESS, payload: response.data})

        } catch(e) {

            dispatch({type: UserActionTypes. FETCH_USERS_ERROR, payload: "oops looks like something went wrong :("})

        }}}

Отже, ми розглянули роботу з найпопулярнішим state-менеджером для React JS. Він дозволяє майстерно  керувати даними, в результаті чого на його основі пізніше був випущений redux-toolkit з більшими можливостями. Але до сих пір React-Redux є чудовим рішенням для більшості проектів.

Література

1. https://github.com/reduxjs/redux/releases/tag/v4.1.0

2. https://react-redux.js.org/introduction/getting-started

3. https://www.javatpoint.com/react-redux

__________________________

Науковий керівник: Кіш Надія Василівна, кандидат педагогічних наук, доцент, Державний вищий навчальний заклад «Ужгородський національний університет», м. Ужгород



Creative Commons Attribution Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License
допомога Знайшли помилку? Виділіть помилковий текст мишкою і натисніть Ctrl + Enter

Інші наукові праці даної секції

Конференції

Конференції 2024

Конференції 2023

Конференції 2022

Конференції 2021



Міжнародна інтернет-конференція з економіки, інформаційних систем і технологій, психології та педагогіки

Наукова спільнота - інтернет конференції

:: LEX-LINE :: Юридична лінія

Інформаційне суспільство: технологічні, економічні та технічні аспекти становлення