React
Реагировать с Redux

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Поиск…


Вступление

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


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow