Как выглядит типичный поток данных в приложении React с Redux?
Этот вопрос проверяет знание, как данные передаются и обновляются в приложении с Redux.
Короткий ответ
Поток данных в Redux односторонний. Компоненты вызывают действия (actions), которые передаются в редьюсеры (reducers) через хранилище (store). Редьюсеры обновляют состояние, и компоненты получают обновления через подписки.
Длинный ответ
Поток данных в Redux представляет собой одностороннюю архитектуру, что делает его простым и предсказуемым. Вот типичный цикл:
Действие (Action):
Компонент инициирует действие — объект, описывающий, что должно произойти. Например:
const incrementAction = { type: 'INCREMENT' };Отправка действия (Dispatch):
Действие передается в хранилище (store) с помощью метода dispatch:
store.dispatch(incrementAction);Редьюсер (Reducer):
Хранилище передает действие в редьюсеры, которые принимают текущее состояние и действие и возвращают новое состояние:
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}Обновление состояния:
Хранилище сохраняет новое состояние и уведомляет подписанные компоненты о его изменении.
Отображение в компоненте:
Компоненты, подписанные на состояние через useSelector или connect, получают новое значение и перерисовываются:
const count = useSelector((state) => state.count);
Пример полного цикла:
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
// Редьюсер
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// Хранилище
const store = createStore(counterReducer);
// Компоненты
function Counter() {
const count = useSelector((state) => state);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
}
// Приложение
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}Такая односторонняя структура упрощает понимание потока данных и позволяет избежать запутанных взаимосвязей между компонентами. Она также делает Redux удобным для работы в больших командах.