2022-02-18 Intro to Redux

Intro

 

- React에서 State는 Class component안에서 관리함. 그런데.

 

 

근데 이러면 상태관리가 매우 복잡해지겠지?

 

그래서 나온게 리덕스

 

 

 

Redux의 기본 개념 : 세 가지 원칙

 

1. Single source of truth

 

동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

 

데이터를 저장하는 '하나의 공간'이 있다.

 

 

 

 

2. State is read-only

 

usestate처럼 action이라는 객체를 통해 변경가능

 

 

 

3. Changes are made with pure functions

 

리듀서와 관련

 

Store

 

컴포넌트와 별개로 상태가 관리되는 오직 하나의 공간. 

 

 

 

Action 

 

자바스크립트 객체임.

{ type: ‘ADD_TO_CART’, payload: request }

-type은 필수로 지정. 그 외의 것들은 선택적으로 사용

 

모든 변화를 action을 통해 취하는 것은 우리가 만드는 앱에서 무슨 일이 일어나고 있는지 직관적으로 알기 쉽게 하는역할을 함.

 

 

 

Dispatch 

Action을 전달하는 메서드. dispatch의 전달인자로 Action 객체가 전달됨. 

 

그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 함.

 

Store

 

state가 관리되는 하나뿐인 저장소. Redux 앱의 state가 저장되어 있는 공간.

 

다음은 createStore 메서드를 활용해 reducer를 연결하는 방법을 알려줌.

 

createStore와 더불어 다른 리듀서의 조합을 인자로 넣어서 스토어를 생성할 수 있음.

 

(실제 소스 코드에서는 미들웨어와 Redux devtools 지원을 위해 두 번째 인자에 추가적인 내용이 들어가 있음)

 

const store = createStore(rootReducer);

 

 

Reducer

 

- Reducer는 현재의 state와 Action을 이용해 새로운 state를 만들어 내는 pure function 

 

 

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
    default:
      return state;
  }
}

- switch 문말고 if문 써도 됨.

 

Reducer의 Immutability(불변성)

Reducer 함수를 작성할 때 주의해야 할 점이 있음. Redux의 state 업데이트는 immutable한 방식으로 변경해야 함.

 

왜냐면? 변경된 state를 로그로 남기기 위해!

 

(React에서 state를 변경하기 위해서는 this.state에 바로 할당하는 것이 아닌 this.setState를 통해 state를 변경해 주어야 했죠?)

 

그렇다면 immutable한 방식으로 state를 변경하기 위해서는 어떻게 코드를 작성해야 할까요?

위의 itemReducer 예제 코드에서 Object.assign을 통해 새로운 객체를 만들어 리턴하는 것을 통해 힌트를 얻을 수 있습니다.

그렇다면 reducers > index.js 파일에서 rootReducer를 구성할 차례입니다. Reducer은 combineReducers 메소드를 통해 여러 가지의 Reducer들을 하나로 합칠 수 있습니다.

 

그럼 이 개념들을 connect 할 수 있는 방법이 있음. (이게 뭔데?)

 

 

 

connect parameter

 

커넥트 매개변수에는

 

• mapStateToProps, mapDispatchToProps 등의 메서드를 이용하는 방법
• Redux hooks를 이용하는 방법

이있음. hook이 최신이므로 이걸로 진행

 

참조 : 리덕스 훅 공식문서

 

useSelector()

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = (props) => {
  const todo = useSelector((state) => state.todos[props.id])
  return <div>{todo.text}</div>
}

 

규칙: 전달인자는 콜백함수(여기서는 화살표함수)를 받고, 콜백 함수의 전달인자로는 state의 값이 들어감

 

 

- 컴포넌트와 state를 연결하는 역할을 함.

 

컴포넌트에서 useSelector 메서드를 통해 store의 state에 접근할 수 있음!

 

어떤 컴포넌트에서 userSelector를 이용하는지 참고!

 

 

useDispatch()

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

 

- Action 객체를 Reducer로 전달해 주는 메서드. Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트일것임.

 

 

 

 

 

Redux의 기본 개념 정리

1. 내가 UI에서 클릭버튼 클릭

 

2. Dispatch메소드의 전달인자로 action객체를 담아 reducer로 전달.

 

3. reducer는 action개체의 타입에 따라 여러 동작을 수행

 

4. 새로운 state가 반환

 

 

 

 

Redux의 장점

 

1. 상태를 예측 가능하게 만들어 준다.

 

2. 유지보수

 

3. 디버깅에 유리하다 (action과 state log 기록 시)

 

4. 테스트를 붙이기 쉽다. - 순수함수를 사용하기 때문에

 

 

 

 

 

redux dev 툴? useStore? connect parameter는 뭔가?