A-Level. React. Redux Thunk.

Redux Thunk

Теми

  1. Action Creator
  2. Middlewares
  3. Асинхронні actions

Action Creators

Action Creators - ф-ція яка створює action.

            // userActions.js
            const userLogin = (login, password) => {
              return { type: 'USER_LOGIN', login, password }
            }
             
            // SomeComponent.js
            dispatch(userLogin('armen', '123'));

Middleware

redux middleware diagram

Middleware

Middleware - это ф-ция, которая модифицирует ф-цию dispatch. И если у нас несколько middleware, то они будут вызываться по цепочке. 

            const logMiddleware = (store) => (next) => (action) => {
              console.log('[LOG_MIDDLEWARE]');
              return next(action);
            };

Redux Thunk

Thunk - дозволяє передавати в store функцію як action.

Встановлюємо: npm install redux-thunk
Підключаємо:
            // store/index.js
            import thunk from 'redux-thunk'
             
            const store = createStore(reducers, applyMiddleware(thunk));

Task 1.

  1. Дороблюємо ToDo List.

Links