Reactify | Frontend Разработка

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

Поскольку всё состояние хранится в одном месте, легче отследить изменения и управлять ими. Это позволяет избежать проблем с синхронизацией, которые могут возникнуть, если состояние хранится в разных местах.

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

Когда состояние приложения меняется, это происходит только через отправку действий. Это делает все изменения явными и отслеживаемыми.

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

Please open Telegram to view this post

VIEW IN TELEGRAM

www.group-telegram.com/us/reactify_IT.com/1328

2.6K viewsOct 31, 2024 at 06:48

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

Поскольку всё состояние хранится в одном месте, легче отследить изменения и управлять ими. Это позволяет избежать проблем с синхронизацией, которые могут возникнуть, если состояние хранится в разных местах.

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);