Шпаргалка по 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
- Названия компонентов должны начинаться с большой буквы.
- Компоненты должны быть маленькими и отвечать за выполнение одной задачи.
- Компоненты должны иметь небольшое описание.
/**
*
* Author: {...}
* Description: {...}
* Dependencies: {...}
*
**/
const SampleComponent = () => {
return (
<div>
Пример компонента
</div>
);
}
export default SampleComponent;
- В коде должен использоваться синтаксис ES6.
- Названия переменных и функций, которые не являются константами и конструкторами, соответственно, и которые состоят из нескольких слов, должны быть в стиле lowerCamelCased.
- Предопределенные константы именуются в верхнем регистре, слова разделяются нижним подчеркиванием — UPPER_UNDERSCORED.
- При проверке типа переменной, название типа указывается в кавычках (не оборачивается в фигурные скобки), а для сравнения используется оператор строго равенства:
if (typeof myVariable === 'string') {
// ...
}
- В простых случаях вместо оператора
if/else
должен использоваться тернарный оператор:
// if/else
if (condition) {
//...
} else {
//...
}
// тернарный оператор
const myVariable = condition ? exprIfTrue : exprIfFalse
- Вместо контейнеров следует использовать фрагменты:
//...
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>
</>
);
}
- Все файлы, относящиеся к одному компоненту, должны находиться в одной директории
- Следует отдавать предпочтение функциональным компонентам.
- В качестве обработчиков событий не следует использовать анонимные функции.
- Следует избегать использования встроенных стилей.
- Чтобы скрыть компонент, нужно вернуть
null
при его рендеринге. - Компоненты высшего порядка должны использоваться только для решения проблем взаимодействия компонентов между собой.
- Индексы элементов массива не должны использоваться в качестве ключей (
keys
). - В JSX вместо тернарного оператора могут использоваться короткие вычисления:
const sampleComponent = () => {
return isTrue ? <p>Естина</p> : null
};
const sampleComponent = () => {
return isTrue && <p>Естина</p>
};
Возможно вам будет интересно — Возможно вам будет интересно — Шпаргалка по Jest с примерами кода.