REDUX Flashcards
Три основных принципа Redux
- У проекта должен быть единый источник истинныю У нас есть глобальный стейт информация о котором употребляется нашими компонентами и при этом не дублируется.
- Наш sate (объект стора) дается нам только для чтени. Перезаписывать на прямую не льзя (store.todos = [1, 2]). Изминения стейта происходит через action где мы возврощаем новый масив на основе старого.
- Обрабатываться на action-и в редьюсере. Reducer - это чистая синхронная функция которая ведет себя предсказуемо, одинаково выдает результат при одинаковых входных данных.
Чистые функции не имеюют SideEffect-ов, получиные объекты не мутируют только читают. Возвращают новое значение ни изменяя старое на прямую.
FLOW REDUX
1 есть STORE –> 2. отрисовка в UI –> 3. через UI юзер делает action –> 4. action передается в нужный через функцию dispatch() по очереди вызываются Reducers меняет сторе –> 1 –> 2 –> 3 –> 4–> …..
API Reference Redux
Redux есть 5 функций Top - Level:
1. createStore(reducer, [preloadedState], [enhancer])
1.1 reducer обязательный параметр который принимает reducer.
1.2 preloadedState - значене по дефолту
1.3 enhancer - принимает мидлвеер.
2. combineReducers(reducers) - комбинирует несколько редюсеров;
3. applyMiddleware(…midlewares);
4. bindActionCreators(actionCreatetors, dispatch) - Преобразует объект, значениями
которого являются генераторы экшенов, в объект с теми же ключами, но
генераторами экшенов, обернутыми в вызов dispatch, т.ч. они могут быть вызваны
напрямую.
(
import * as actions from ‘./action’;
const {incDispatch, decDispatch, resetDispatch} = bindActionCreators(actions,
dispatch);
Мы используем incDispatch вместо dispatch(INCREMENT)
)
5. compose(…functions) - как аргумент принимает функции и они друг за другом будут
вызыватся с переданным аргументом который будет подан на вход.
Объединяет функции справа налево. функции для
композиции. Ожидается, что каждая функция принимает один параметр. Ее
возвращаемое значение будет представлено в качестве аргумента для функции
стоящей слева, и так далее. Исключением является самый правый аргумент,
который может принимать несколько параметров, поскольку он будет
обеспечивать подпись для полученной в результате функции.;
Есть 4 функции по работе со стором:
1. getState() - получает стейт;
2. dispatch() - получает action вызывает все редюсеры по очереди;
3. subscribe(listener); - Данный метод принимает функцию, которая будет
вызывается каждый раз после обновления store. Он как бы «подписывает»
функцию, переданную ему на обновление. К примеру следующий код при каждом
обновлении (при каждом вызове dispatch()) будет выводить новое значение store
в консоль
4. replaceReduxer(nextReducer);
useSelector/ useDispatch
useSelector() Позволяет извлекать данные из состояния(state) хранилища(store) Redux с помощью функции селектора. (замена getState())
useDispatch - Это хук который возвращает ссылку на функцию dispatch из Redux хранилища(store). Функция находит нужный Reducer и обрабатывает значение.
Middleware
Это функции которые находятся в промежутке между Action и Reducer. Их может быть любое количество. Используюют ее для:
1. Логирования;
2. Отчет об ошибках;
3. Асинхронная логика;
4. Модификация Action (либо его отмены);
Подключаются во время во время создания стора.
Созданный миделвеер толжен подходить такой сигнатуре.
const myLogger = (store) => (next) => (action) => {
next(action); // обязательно использовать next
};
const store = createStore(counter, applyMiddleware(loger)
Что такое thunk разница между Action Creator and thunk Action
thunk - это функция которая делает асинхронную задачу и которая умеет диспатчить обычные action-ы. Thnunk можно тоже задиспатчить и стор поймет что с ней делать.
https://www.youtube.com/watch?v=eWdnjfRu9Io&t=337s
Асинхранная логика происходит на уровне мидлвееров. Отправляется запрос на сервер, тем временем вызывается Reducer после прихода результата от сервера мидлвеер вызывает еще раз дополнительный Action.
Action Creator
Функция которая возвращает объект
Не вызывает внутри себя другие события
Не имеет доступа к внешним redux методам
Только синхронная работа
const actionExample = (data) => ({
type: ‘SOME_TYPE’,
payload: data,
});
Thunk Action
Функция которая НЕвозвращает объект
Вызывает внутри себя другие события
Имеет доступа к внешним redux методам(dispatch, getState)
Асинхронная работа
const thunkExample = (data) => (dispatch, getState) => {
dispatch(onLoader(true));
fetch(url)
.then((res) => res.json())
.then((data) => {
dispatch(getDashboard(data));
});
Thunk extraArgument
Чтобы не импортировать наш client API (запросы на сервер) много раз мы можем использовать thunk.withExtraArgument(client).
потом уже используем в thunk-e как третий параметр второй функции.
const loadUsers = () => (dispatch, _, client) => {
fetch(‘http://……..’)
.then(res => res.json();
.then(data => dispatch(addUsers(data)))
Flow работы с thunk middleware
В store.dispatch приходит action –> отправляется thunk MD –> thunk MD смотрит это action тогда передает в reducers.
В store.dispatch приходит thunc (function) –> отправляется thunk MD –> thunk MD смотрит это функция –> вызовит данную функцию, сам закинет метод dispatch –> в вызванной функции диспатчатся actions –> при каждом диспатче action –> снова поподает thunk md смотрит что это объект –> передает в редюсер.
