Тестирование redux

Я описал выше вариант "тесты после кода", когда интересно увидеть только общую картину. Но когда TDD, и тесты нужны на каждый чих, то в сагах детализация глубже.

Тестирование redux

SSR использую в полный рост, только не понял, к чему этот уточняющий вопрос — assignAll не работает на сервере?

Я отказался совсем от биндинга экшенов, не использую mapDispatchToProps, наоборот предпочитаю явно дергать dispatch(), но в результате боевой код имеет много лишнего:

interface IOwnProps {}

interface IConnectedState {
  router: RouterState;
}

interface IConnectedDispatch {
  dispatch: Dispatch<IStoreState>;
}

type IProps = IOwnProps & IConnectedState & IConnectedDispatch;

interface IState {}

const mapStateToProps = (state: IStoreState) => ({
  router: state.router,
});

const WrappedUser = connect<IConnectedState, IConnectedDispatch, IOwnProps>(mapStateToProps)(
  class User extends React.Component<IProps, IState> {
    componentDidMount() {
      this.props.dispatch(myAction())
    }
    //...
  }
)

export default WrappedUser;

Спасибо, записал в блокнотик "подумать, как спрятать dispatch". Только оно должно работать с redux-thunk и redux-saga.

БЭМ + React: гибкая архитектура дизайн-системы

Про фашизм у Фридмана — это для максимального контраста?

Знай свой инструмент: Event Loop в libuv

"Компьютер — это конечный автомат". Алан Кокс, прим. Википедия

Блин, раньше считал, что сам это придумал.

Клонирование игры Lode Runner с первого ПК в СССР «БК-0010» плюс несколько слов о программировании игр в конце 80-х

Ага, тысячи их. У меня был дармовой доступ к самой большой коллекции в Питере.

Клонирование игры Lode Runner с первого ПК в СССР «БК-0010» плюс несколько слов о программировании игр в конце 80-х

В свое время я пытался освоить все игры для ZX Spectrum — тоже было непросто. А вот для 3DO задача оказалась выполнима, но полгода выпало из жизни.

Прагматичное функциональное программирование

Реквестирую перевод Simple Made Easy

Путешествие за бугор и обратно: как не надо устраиваться работать за рубежом

По моим наблюдениям и личному опыту, рынок труда в сфере ИТ во время текущего кризиса все больше похож на бизнес-отношения в строительстве. (Там давно уже за правило попробовать кинуть подрядчика, перед тем, как заплатить).

И вас (и меня) еще не раз ожидают подобные ситуации.

Путешествие за бугор и обратно: как не надо устраиваться работать за рубежом

Открываю правила Хабра (может быть что-то изменилось — нет):

Если у вас проблемы с сотовым оператором, с провайдером интернета или хостинга, или с чем-то ещё, всегда можно связаться со службой поддержки нужного вам ресурса. Или с компетентными органами. Но не следует использовать «Хабр» как рупор, дабы рассказать всем о постигшей вас ситуации.

Красочный код: как цвет помогает в работе с кодом

Это была одна из ключевых причин перехода с WebStorm на VSCode. Но мне для TypeScript, меняйте специализацию на React Native. :)

Comedy. Акторы в Node.JS для гибкого масштабирования

Реквестирую сравнение с конкурентами.

История о том, как мы перевели проект в почти четверть миллиона строк на TypeScript и остались в живых

Нашёл способ кастомизировать: 10 шагов настройки Create React App + TypeScript + Ant-Design.

Или Meteor

Очевидно, вы пролистали на мою заметку по диагонали, Apollo упоминается два раза. Но суть уловили верно. Задача развязать клиент и сервер в рамках существующего долгоиграющего проекта (без Apollo). И Redux мне в этом поможет.

Или Meteor

Я неточно выразился. Представляю себе Redux, как архитектуру движения данных в приложении. Так лучше?

10 шагов настройки Create React App + TypeScript + Ant-Design

Например. Сравнивая CRA и CRA-TS, меня смущает, что tsconfig.json и tslint.json торчат наружу. Да, я хотел бы иметь возможность их править при необходимости, но мне нужны "настройки по умолчанию". Это крайне ценное назначение CRA, на мой вкус.

10 шагов настройки Create React App + TypeScript + Ant-Design

Не понял. У вас же по коду прибавилось функционала (подключение к реакт-роутеру).

10 шагов настройки Create React App + TypeScript + Ant-Design

Затык случился лишь однажды, когда CRA переехал на Webpack 2 — тынц.

10 шагов настройки Create React App + TypeScript + Ant-Design

В этом весь цимес, обновление CRA хоть каждый день, без последствий за пару минут! И никакой магии, вставьте console.log(config) в config-overrides.js — конфиг webpack, как на ладони.

npm link на стероидах

Вот и всё, что мне нужно для щастья:

yarn add --dev file:path/to/your/custom/package

В чём сила Redux?

Я пришёл к такому разделению редюсеров. Есть общий редюсер app, где свалка глобальных состояний приложения. Для каждой сущности два редюсера: item и list. При этом редюсер для item используется на нескольких страницах (просмотр и редактирование сущности). При этом данные отображаемых сущностей в списке (list) спрятаны в локальных стейтах, а в редюсерах живут флаги и сайд-эффекты. И только данные для item так же живут в редюсере, потому что их нужно отображать в форме и в превью (например). Благодаря redux-act, ни один switch не пострадал.

Чего тут сложного?!

// @flow
import { createAction, createReducer } from 'redux-act'
import api from 'api'

export const REDUCER = 'user'
const NS = `@@${REDUCER}/`

const reset = createAction(`${NS}RESET`)
const set = createAction(`${NS}SET`)

export const readItem = (id: ?number) => (dispatch: Function, getState: Function) => {
  if (id) {
    return api.get(`/api.php/members/${id}`).then(response => 
      dispatch(set(response.data))
    )
  }
  dispatch(reset())
  return Promise.resolve()
}

export const submit = (id: ?number, values: Object) => (dispatch: Function, getState: Function) => {
  if (id) {
    return api.put(`/api.php/members/${id}`, values)
  }
  return api.post(`/api.php/members`, values)
}

const initialState = {}

export default createReducer(
  {
    [reset]: () => ({ ...initialState }),
    [set]: (state, data) => ({ ...state, ...data }),
  },
  initialState,
)