React => Redux와의 반응

소개

요즘 프론트 엔드에서 애플리케이션 수준의 상태를 관리하는 데있어 Redux가 자리를 잡았으며 "대규모 애플리케이션"을 사용하는 사람들은 종종이를 맹세합니다. 이 주제에서는 React 애플리케이션에서 상태 관리 라이브러리 Redux를 사용해야하는 이유와 방법에 대해 설명합니다.

비고

React의 컴포넌트 기반 아키텍처는 애플리케이션을 모듈화되고 캡슐화 된 작은 조각으로 분해하는 데 환상적이지만, 전체적으로 애플리케이션 상태를 관리하기위한 몇 가지 과제를 제시합니다. Redux를 사용하는 시간은 하나 이상의 구성 요소 또는 페이지 (같은 경로)에 동일한 데이터를 표시해야하는 경우입니다. 이 시점에서 더 이상 데이터를 한 구성 요소 나 다른 구성 요소의 로컬 변수에 저장할 수 없으며 구성 요소간에 메시지를 보내면 신속하게 엉망이됩니다. Redux를 사용하면 구성 요소가 모두 상점의 동일한 공유 데이터에 가입하므로 상태를 전체 응용 프로그램에 일관되게 쉽게 반영 할 수 있습니다.

연결 사용

createStore를 사용 하여 Redux 저장소를 만듭니다.

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

React
Redux와의 반응

수색…

소개

비고

연결 사용