Redux란?

React에서의 프런트 어플리케이션 개발시에 세트로 취급되는 것이 많은 것이 이 redux입니다.

A predictable state container for Javascript apps.
공식 사이트 보다.

다음 4가지 특징입니다.

· 예측 가능
· 중앙화
· 디버깅이 쉽다.
· 유연한

왜 이것을 사용해야합니까?

한 컴포넌트에서 정의한 값을 다른 컴포넌트에서도 사용하고 싶은 경우에, React에서는 Props라는 것을 사용해 부모 컴퍼넌트로부터 아이 컴퍼넌트에 값을 건네줍니다. 항상 이 방향이 되고 단방향 데이터 흐름은 React의 3대 특징 중 하나입니다.

그러나 손자나 또 다른 복수의 컴퍼넌트에서 값을 사용하고 싶다고 하는 경우에, 버킷 릴레이로 건네가는 것은 힘들다고 하는 것으로 이 Redux라고 하는 것을 사용해 컴퍼넌트 전체로 값을 관리할 수 있는 구조가 만들어집니다 했다.

【Redux 아키텍처】

이를 통해 데이터가 단방향이 되는 것을 보장하고, 상태 변경이 쫓기 쉽고 파탄하기 어려운 시스템을 만들 수 있습니다.

Redux의 구성 요소

redux 공식 샘플 를 바탕으로 redux의 컴퍼넌트의 개요에 대해 설명합니다.

state

구성 요소의 상태를 나타내는 값을 저장하기 위한 것입니다. 컴퍼넌트의 「현재 상태」를 취급하기 위한 것입니다. 컴퍼넌트의 표시를 바꾸거나 하기 위해서 state 를 갱신합니다.

공식에서는 state로서 수치 리터럴의 0이 직접 reducer에 건네지고 있습니다.

export default (state = 0, action) => {

Reducer

Action과 state를 받고, 새로운 State를 돌려줍니다.

※어원은 화학의 Reduce(환원)입니다

CuO + H2 → Cu + H2O

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

store

state(데이터)를 보관하고 관리하는 것.

const store = createStore(counter)

액션

action이란 실태는 자바 스크립트 객체 .
action은 반드시 type이라는 멤버를 반드시 가집니다.

{type: 'DECREMENT'}
{type: 'INCREMENT'}

dispatch

dispatch가 reducer를 호출하고 되돌아온 reducer에 의해 값이 조작됩니다.

onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
onDecrement={() => store.dispatch({ type: 'DECREMENT' })}

요약

Reducer, action, store 등 복수의 새로운 개념이 등장하기 때문에 처음에는 이해하기 쉽지 않다고 생각합니다만, 반복 코드를 읽거나 실제로 쓰거나 해 나가 갑시다.

참고

htps : // Rez X. js. rg/
htps : // 기주 b. 코 m / 레즈 xjs / 레즈 x / t 레에 / 뭐 r / 에 mp ぇ s / 이렇게 r