React
Реагировать с Redux
Поиск…
Вступление
Redux стал статус-кво для управления состоянием на уровне приложений в интерфейсе в наши дни, а те, кто работает над «крупномасштабными приложениями», часто клянутся им. В этом разделе рассказывается, почему и как вы должны использовать библиотеку управления государством, Redux, в своих приложениях React.
замечания
В то время как архитектура, основанная на компонентах React, является фантастикой для разбивки приложения на модульные, инкапсулированные маленькие кусочки, это создает некоторые проблемы для управления состоянием приложения в целом. Время использования Redux - это когда вам нужно отображать одни и те же данные более чем на одном компоненте или странице (иначе это маршрут). В этот момент вы больше не сможете хранить данные в переменных, локальных для одного компонента или другого, и отправка сообщений между компонентами быстро становится беспорядочным. С Redux ваши компоненты все подписываются на одни и те же общие данные в магазине, и, таким образом, состояние может быть легко отражено последовательно во всем приложении.
Использование Connect
Создайте хранилище Redux с помощью createStore .
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})
Используйте соединение для подключения компонента к хранилищу Redux и вытащите реквизиты из хранилища в компонент.
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
Определите действия, которые позволяют вашим компонентам отправлять сообщения в хранилище Redux.
/*
* action types
*/
export const ADD_TODO = 'ADD_TODO'
export function addTodo(text) {
return { type: ADD_TODO, text }
}
Обработайте эти сообщения и создайте новое состояние для хранилища в функциях редуктора.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}