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

GuDron · 18 Фев 2021

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 })

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

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

1
2
3
4
5
6
7
8
9
10
11

let store = createStore(counter)

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

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

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

Провайдер

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

1
2
3
4
5
6

import { Provider } from 'react-redux'

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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)

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

1
2
3

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

Посредники

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

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

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

1
2
3

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

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

GuDron · 18 Фев 2021

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

Названия компонентов должны начинаться с большой буквы.
Компоненты должны быть маленькими и отвечать за выполнение одной задачи.
Компоненты должны иметь небольшое описание.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
*
* Author: {...}
* Description: {...}
* Dependencies: {...}
*
**/
const SampleComponent = () => {

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

export default SampleComponent;

В коде должен использоваться синтаксис ES6.
Названия переменных и функций, которые не являются константами и конструкторами, соответственно, и которые состоят из нескольких слов, должны быть в стиле lowerCamelCased.
Предопределенные константы именуются в верхнем регистре, слова разделяются нижним подчеркиванием — UPPER_UNDERSCORED.
При проверке типа переменной, название типа указывается в кавычках (не оборачивается в фигурные скобки), а для сравнения используется оператор строго равенства:

1
2
3

if (typeof myVariable === 'string') {
// ...
}

В простых случаях вместо оператора if/else должен использоваться тернарный оператор:

1
2
3
4
5
6
7
8
9

// if/else
if (condition) {
//...
} else {
//...
}

// тернарный оператор
const myVariable = condition ? exprIfTrue : exprIfFalse

Вместо контейнеров следует использовать фрагменты:

1
2
3
4
5
6
7
8
9
10
11
12
13

//...

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

//...

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

Все файлы, относящиеся к одному компоненту, должны находиться в одной директории
Следует отдавать предпочтение функциональным компонентам.
В качестве обработчиков событий не следует использовать анонимные функции.
Следует избегать использования встроенных стилей.
Чтобы скрыть компонент, нужно вернуть null при его рендеринге.
Компоненты высшего порядка должны использоваться только для решения проблем взаимодействия компонентов между собой.
Индексы элементов массива не должны использоваться в качестве ключей (keys).
В JSX вместо тернарного оператора могут использоваться короткие вычисления:

1
2
3
4
5
6
7

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

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

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

GuDron

dumpz.ws

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

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

Провайдер

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

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

Посредники

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

GuDron

dumpz.ws

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

Похожие темы

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

GuDron

dumpz.ws

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

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

Провайдер​

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

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

Посредники​

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

GuDron

dumpz.ws

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

Похожие темы

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

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

Провайдер

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

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

Посредники

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

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