Шпаргалка по Redux с примерами кода (stylesheet)

Шпаргалка по Redux (Stylesheet Jest)

Создание хранилища

Хранилище создается с помощью редуктора, принимающего текущее состояние и возвращающего новое состояние на основе полученной операции.

import { createStore } from 'redux'

// Редуктор
function counter (state = { value: 0 }, action) {
  switch (action.type) {
  case 'INCREMENT':
    return { value: state.value + 1 }
  case 'DECREMENT':
    return { value: state.value - 1 }
  default:
    return state
  }
}

const store = createStore(counter)

// Опционально, в качестве второго аргумента можно передать начальное состояние - `initialState`
const store = createStore(counter, { value: 0 })

Использование хранилища

Для того, чтобы измененить состояние хранилища, необходимо отправить операцию в редуктор:

let store = createStore(counter)

// Отправляем операции; это приводит к изменению состояния
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

// Получаем текущее состояние
store.getState()

// Регистрируем изменения
store.subscribe(() => { ... })

Провайдер

Компонент <Provider> делает хранилище доступны для компонентов. Компонент подключается к хранилищу с помощью метода connect():

import { Provider } from 'react-redux'

React.render(
  <Provider store={store}>
    <App />
  </Provider>, mountNode)

Привязка (mapping) состояния

import { connect } from 'react-redux'

// Функциональный компонент
function App ({ message, onMessageClick }) {
  return (
    <div onClick={() => onMessageClick('Привет!')}>
      {message}
    </div>
  )
}

// Привязываем `state` к `props`:
function mapState (state) {
  return { message: state.message }
}

// Привязываем `dispatch` к `props`:
function mapDispatch (dispatch) {
  return {
    onMessageClick (message) {
      dispatch({ type: 'click', message })
    }
  }
}

// Подключаем их
export default connect(mapState, mapDispatch)(App)

Объединение редукторов

const reducer = combineReducers({
  counter, user, store
})

Посредники

Посредники (middlewares) — это декораторы для dispatch(), позволяющие принимать операции и выполнять определяемые ими задачи:

// Бесполезный посредник
const logger = store => dispatch => action { dispatch(action) }

const logger = store => {
  // Данная функция запускается в `createStore()`
  // и возвращает декоратор для `dispatch()`

  return dispatch => {
    // Также запускается в `createStore()`
    // и возвращает новую функцию `dispatch()`

    return action => {
      // Запускается при каждом выполнении `dispatch()`
    }
  }
}

Применение посредников

const enhancer = applyMiddleware(logger, thunk, ...)

const store = createStore(reducer, {}, enhancer)

Шпаргалка по Redux. Лучшие практики по использованию React

  1. Названия компонентов должны начинаться с большой буквы.
  2. Компоненты должны быть маленькими и отвечать за выполнение одной задачи.
  3. Компоненты должны иметь небольшое описание.
/**
*
* Author: {...}
* Description: {...}
* Dependencies: {...}
*
**/
const SampleComponent = () => {

  return (
    <div>
      Пример компонента
    </div>
  );
}

export default SampleComponent;
  1. В коде должен использоваться синтаксис ES6.
  2. Названия переменных и функций, которые не являются константами и конструкторами, соответственно, и которые состоят из нескольких слов, должны быть в стиле lowerCamelCased.
  3. Предопределенные константы именуются в верхнем регистре, слова разделяются нижним подчеркиванием — UPPER_UNDERSCORED.
  4. При проверке типа переменной, название типа указывается в кавычках (не оборачивается в фигурные скобки), а для сравнения используется оператор строго равенства:
if (typeof myVariable === 'string') {
  // ...
}
  1. В простых случаях вместо оператора if/else должен использоваться тернарный оператор:
// if/else
if (condition) {
    //...
} else {
    //...
}

// тернарный оператор
const myVariable = condition ? exprIfTrue : exprIfFalse
  1. Вместо контейнеров следует использовать фрагменты:
//...

render() {
  return (
    <Fragment>
      <p>Какой-то текст.</p>
      <h2>Заголовок</h2>
      <p>Еще текст.</p>
      <h2>Другой заголовок</h2>
      <p>И снова текст.</p>
    </Fragment>
  );
}

Сокращенный вариант:

//...

render() {
  return (
    <>
      <p>Какой-то текст.</p>
      <h2>Заголовок</h2>
      <p>Еще текст.</p>
      <h2>Другой заголовок</h2>
      <p>И снова текст.</p>
    </>
  );
}
  1. Все файлы, относящиеся к одному компоненту, должны находиться в одной директории
  2. Следует отдавать предпочтение функциональным компонентам.
  3. В качестве обработчиков событий не следует использовать анонимные функции.
  4. Следует избегать использования встроенных стилей.
  5. Чтобы скрыть компонент, нужно вернуть null при его рендеринге.
  6. Компоненты высшего порядка должны использоваться только для решения проблем взаимодействия компонентов между собой.
  7. Индексы элементов массива не должны использоваться в качестве ключей (keys).
  8. В JSX вместо тернарного оператора могут использоваться короткие вычисления:
const sampleComponent = () => {
  return isTrue ? <p>Естина</p> : null
};

const sampleComponent = () => {
  return isTrue && <p>Естина</p>
};

Возможно вам будет интересно — Возможно вам будет интересно — Шпаргалка по Jest с примерами кода.