OTUS

В реальных проектах берут готовую реализацию паттерна.

Для Javascript ее можно найти на npmjs.com

Высокоуровневые экспорты

• createStore(reducer, [preloadedState], [enhancer])
• combineReducers(reducers)
• applyMiddleware(...middlewares)
• bindActionCreators(actionCreators, dispatch)
• compose(...functions)

API стора Store

• getState()
• dispatch(action)
• subscribe(listener)
• replaceReducer(nextReducer)

Паттерн реализован так же как было разобрано на прошлом занятии. Только в прошлом мы смотрели упрощенный API (без некоторых методов).

Вопросы?

const getStarredRepos = (username: string) => {
  return fetch(`https://api.github.com/users/${username}/starred`);
};

const getStarredRepos = (username: string) => {
  return fetch(`https://api.github.com/users/${username}/starred`).then(
    (data) => saveData(data)
  );
};

const getStarredRepos = (username: string) => {
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => saveData(data))
    .catch((error) => showError(error));
};

const getStarredRepos = (username: string) => {
  saveIsLoading();
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => saveData(data))
    .catch((error) => showError(error));
};

const getStarredRepos = (username: string) => {
  dispatch({ type: "LOADING" });
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => dispatch({ type: "SUCCESS", data }))
    .catch((error) => dispatch({ type: "ERROR", error }));
};

const reducer = (state = { isLoading: false }, action) => {
  switch (action.type) {
    case "LOADING":
      return { ...state, isLoading: true };
    case "SUCCESS":
      return { ...state, isLoading: false, data: action.data, error: null };
    case "ERROR":
      return { ...state, isLoading: false, data: null, error: action.error };
    default:
      return state;
  }
};

const getStarredReposForCurrentUser = () => {
  const username = getCurrentUser(state).username;
 
  dispatch({ type: "LOADING" });
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => dispatch({ type: "SUCCESS", data }))
    .catch((error) => dispatch({ type: "ERROR", error }));
};

Вопросы?

Практика

При клике на кнопку:

• отправьте событие loading
• дождидесь получения данных и отправьте событие success
• в случае ошибки отправьте событие error

Thunk - это отложенное вычисление

const think = 42 + 666;
 
const thunk = () => 42 + 666;
 
const think2 = thunk();

// Применительно к actions
const think = dispatch({ type: "ADD", value: 666 });
 
const thunk = () => dispatch({ type: "ADD", value: 666 });

// если избавиться от внешних зависимостей и передавать их параметрами
const thunk = (dispatch) => dispatch({ type: "ADD", value: 666 });
 
const thunk = (dispatch, getState) => dispatch({ type: "ADD", value: 666 });

// Как dispatch может быть устроен внутри
const dispatch = (action) => {
  const newState = rootReducer(store.getState(), action);
  store.setState(newState);
};

// а если бы мы хотели поддерживать thunk
const dispatch = (action) => {
  if (typeof action === "function") {
    return action(dispatch, store.getState);
  }
 
  const newState = rootReducer(store.getState(), action);
  store.setState(newState);
};

// think
const username = getCurrentUser(state).username;
 
dispatch({ type: "LOADING" });
 
fetch(`https://api.github.com/users/${username}/starred`)
  .then((data) => dispatch({ type: "SUCCESS", data }))
  .catch((error) => dispatch({ type: "ERROR", error }));

// thunk
const getStarredReposForCurrentUser = () => {
  const username = getCurrentUser(state).username;
 
  dispatch({ type: "LOADING" });
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => dispatch({ type: "SUCCESS", data }))
    .catch((error) => dispatch({ type: "ERROR", error }));
};

// thunk (with dependencies)
const getStarredReposForCurrentUser = (dispatch, getState) => {
  const username = getCurrentUser(getState()).username;
 
  dispatch({ type: "LOADING" });
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => dispatch({ type: "SUCCESS", data }))
    .catch((error) => dispatch({ type: "ERROR", error }));
};

Напомню, мы обычно используем не actions напрямую, а action creators

// не
dispatch({ type: "USERS_LOADED", payload: list });

// а
dispatch(usersLoaded(list));

// где
const userLoaded = (payload) => ({
  type: "USERS_LOADED",
  payload,
});

// thunk action creator
const getStarredReposForCurrentUser = () => (dispatch, getState) => {
  const username = getCurrentUser(getState()).username;
 
  dispatch({ type: "LOADING" });
 
  return fetch(`https://api.github.com/users/${username}/starred`)
    .then((data) => dispatch({ type: "SUCCESS", data }))
    .catch((error) => dispatch({ type: "ERROR", error }));
};
 
dispatch(getStarredReposForCurrentUser());

Вопросы?

const middleware = (middlewareApi) => (next) => (action) => {
  // your code
};

type MiddlewareApi = {
  dispatch: Dispatch;
  getState: () => State;
};
 
const middleware = (middlewareApi: MiddlewareApi) => (next) => (action) => {
  // your code
};

const middleware =
  (middlewareApi: MiddlewareApi) =>
  (next: (action: AnyAction) => AnyAction) =>
  (action) => {
    // your code
  };

const middleware =
  (middlewareApi: MiddlewareApi) =>
  (next: (action: AnyAction) => AnyAction) =>
  (action: AnyAction): AnyAction => {
    // your code
  };

const middleware: Middleware =
  ({ dispatch, getState }) =>
  (next) =>
  (action) => {
    // Сделать что-то до дальнейшей цепочки
    const resultAction = next(action);
    // Сделать что-то после дальнейшей цепочки
    return resultAction;
  };

const middleware: Middleware =
  ({ dispatch, getState }) =>
  (next) =>
  (action) => {
    const resultAction = next(action);
 
    if (action.type === "BUY_BUTTON_CLICK") {
      const state = getState();
      sendAnalytics("buy", { user: state.currentUser });
    }
 
    return resultAction;
  };

Задачи, для middleware:

• Логирование
• Аналитика
• Devtools
• Обработка actions
• Цепочки actions

Вопросы?

Практика

В файле logger.ts раскомментируйте объявленную там middleware

• Залогируйте состояние до экшена
• Пустите экшен по цепочке дальше
• Залогируйте состояние после
• Верните экшен полученный из цепочки

Вопросы?

// Пропатченый dispatch для поддержки thunk
const dispatch = (action) => {
  if (typeof action === "function") {
    action(dispatch, store.getState);
  }
 
  const newState = rootReducer(store.getState(), action);
  store.setState(newState);
};

Напомню, что эта трагическая история описана в документации

/**
 * Позволяет вам отправлять функцию вместо экшена.
 * Функция будет принимать `dispatch` и `getState` в качестве аргументов.
 *
 * Полезно для раннего выхода (условия над `getState()`), а также для
 * асинхронного потока управления (может `dispatch()` что-то другое)
 *
 * `dispatch` будет возвращать значение отправляемой функции.
 */
const thunk = (store) => (next) => (action) =>
  typeof action === "function"
    ? action(store.dispatch, store.getState)
    : next(action);

Redux-thunk

и как эта функция выглядит в исходном коде

Как миддлвары подключаются к store:

import { createStore, applyMiddleware } from "redux";
import todos from "./reducers";
 
function logger({ getState }) {
  return (next) => (action) => {
    console.log("will dispatch", action);
 
    // Call the next dispatch method in the middleware chain.
    const returnValue = next(action);
 
    console.log("state after dispatch", getState());
 
    // This will likely be the action itself, unless
    // a middleware further in chain changed it.
    return returnValue;
  };
}
 
const store = createStore(todos, ["Use Redux"], applyMiddleware(logger));
 
store.dispatch({
  type: "ADD_TODO",
  text: "Understand the middleware",
});

Вопросы?

Практика

• установите пакет redux-thunk
• подключите миддлвару redux-thunk к вашему store
• превратите функцию загрузки данных в thunk-action

Как заготовку для API можно взять файл с примером реализации функций отправки и получения сообщений.

Формат сообщений должен быть:

{
  name: string;
  message: string;
  now: number;
}

Вопросы?