A-Level. React. Redux.

Redux

Теми

1. Що таке Redux.
2. Чому він важливий в екосистемі React.
3. Навіщо нам його юзати?
4. Як нам його юзати?
5. Як нам його юзати в React застосунку?

Проблеми

• Розподіл обов’язків між візуальними компонентами.
• Відокремлення логіки додатка.
• Керування моделлю даних.

Redux

• Redux вирішує проблему управління станом у додатку
• Redux пропонує зберігати state в одному "глобальному об'єкті"
• Функція Reducer оновлює глобальний state у відповідь на actions
• Об'єкт Store повідомляє про оновлення

3 Принципи

• Єдине джерело правди.
• Стан лише для читання.
• Мутації написані як чисті функції

• View - компоненти
• Action - описує що відбувається
• Reducer - ф-ція яка змінює стейт
• State - обʼєкт в якому зберігаються данні застосунку

Install Redux

npm install redux

Створюємо store

Store буде керувати нашими данними.

            import { createStore } from 'redux';
             
            const store = createStore();
        

Reducer

Описуємо ф-цію, яка буде змінювати state.

            const counterReducer = (state = { counter: 0 }, action) => {
              return {
                counter: state.counter + 1,
              };
            };
            const store = createStore(counterReducer);
        

Опишемо підписника (subscriber)

Який реагуватиме на зміни в State.

            store.subscribe(() => {
              const latestState = store.getState();
              console.log('>>>', latestState);
            });
        

Dispatch

Змінюємо стан.

            store.dispatch({ type: 'increment' });
        

Reducer

            const counterReducer = (state = initState, action) => {
              if (action.type === 'increment') {
                return { counter: state.counter + 1 }
              }
              if (action.type === 'decrement') {
                return { counter: state.counter - 1 }
              }
              return state;
            }
        

Multiply reducers

Ми можемо розділяти ред'юсери на дрібніші функції, кожна з яких керуватиме своєю частиною стану.

            const store = createStore(combineReducers({
              counter: counterReducer,
              movies: moviesReducer,
            }));
        

React Redux

npm install react-redux - встановлюємо пакет

Connect Redux to React

            import { Provider } from 'react-redux';
            import { store } from './store';
            <Provider store={store}>
              <App/>
            </Provider>
        

useSelector

Підключаємо наш компонент до стору..

Дозволяє отримати дані з Redux-стору за допомогою селектора.

            import { useSelector } from 'react-redux';
            const counter = useSelector((state) => state.counter);
        

useDispatch

Цей хук повертає посилання на функцію dispatch із Redux, що дозволяє нам ініціювати зміни в сторі.

            const dispatch = useDispatch();
            const onClickPlus = () => dispatch({ type: 'increment' });
            const onClickMinus = () => dispatch({ type: 'decrement' });
        

Class Component

Функція connect підключає класовий компонент до стору та передає їх у пропси.

            const mapStateToProps = (state) => ({ counter: state.counter });
            const mapDispatchToProps = (dispatch) => ({
              increment: () => dispatch({ type: 'increment' }),
              decrement: () => dispatch({ type: 'decrement' }),
            });
            export default connect(mapStateToProps, mapDispatchToProps)(Counter)
        

Task 1.

1. Продовжуємо робити ToDo List
2. Підключаємо Redux
3. Для збереження списку задач використовуємо або localStorage, або Firebase (або буть що, на ваш розсуд)

Links

• Redux
• React Redux