mapStateToProps() подключает состояние Redux store к пропсам твоего компонента, позволяя компоненту читать состояние приложения. mapDispatchToProps() подключает диспетчеры действий к пропсам твоего компонента, позволяя компоненту изменять состояние приложения.
mapStateToProps() извлекает нужные данные из состояния и передаёт их как пропсы в твой подключённый компонент:
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
Эта функция получает всё состояние Redux и возвращает объект, содержащий только те части состояния, которые нужны твоему компоненту.
mapDispatchToProps() оборачивает генераторы экшенов в вызовы dispatch и передаёт их как пропсы в твой компонент:
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => dispatch(toggleTodo(id))
}
}
Это позволяет твоему компоненту вызывать экшены без прямого обращения к dispatch().
Redux рекомендует использовать сокращённую форму объекта для mapDispatchToProps():
const mapDispatchToProps = {
onTodoClick: toggleTodo
}
Redux автоматически оборачивает каждый генератор экшенов в вызов dispatch(), что сокращает количество кода и улучшает читаемость.
mapStateToProps(): Связывает состояние Redux → пропсы компонента (только чтение)mapDispatchToProps(): Связывает генераторы экшенов → пропсы компонента (запись)connect() для создания подключённых компонентов, которые интегрируются с ReduxmapStateToProps() получает всё состояние Redux хранилища в качестве параметра и должна вернуть объект, содержащий все срезы состояния, доступные в хранилище.
Новый — ещё не проверен сообществом
Вы