코드스테이츠 소프트웨어 엔지니어링 부트캠프 +76, 리듀서

https://react.vlpt.us/redux/06-redux-devtools.html

위 홈페이지를 통해 리덕스를 공부했다.

 

리덕스의 원론적인 개념만 알고있는 상태에서 실제로 코드를 적어보며 사용법을 익힐 수 있도록 설명을 해주었다.

 

개념복습용 메모

액션

상태에 어떤 변화가 필요할 때, 액션을 발생시킨다. 액션은 하나의 객체로 이루어져있다.

{
//액션 객체는 type을 반드시 가지고 있어야 하고 그 외의 값은 개발자가 마음대로 넣어준다.
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

액션생성함수

액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

export const addTodo = (text) => ({ 
  type: "ADD_TODO",
  text
});

 

리듀서

리듀서는 state와 action을 매개인자로 받아와 새로운 state를 리턴한다.

 

state와 action외에는 외부영향을 받지 않는 순수함수이다. 이를 통해 immutable 속성을 유지한다.

action.type에 따라 그에 맞는 동작을 수행하고 그 결과로 새로운 state리턴

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE'://action.type이 'INCREASE' 일때
      return state + 1;//새로운 state 리턴
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

 

스토어

리덕스에서는 한 에플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는 현재 store와 reducer가 들어가 있고 추가 몇가지 내장함수들이 있다.

import { createStore } from 'redux';
//createStore는 스토어를 만들어주는 함수인데 리액트 프로젝트에서는 단 하나의 스토어만 만든다.
..
생략
..
//스토어 만들기, createStore는 store를 만들어주는 함수인데 reducer가 매개변수로 들어간다.
const store = createStore(reducer)

//현재 store에 있는 상태를 조회한다.
console.log(store.getState());

//스토어 안에 들어있는 상태가 바뀔 때 마다 listener함수가 호출된다.
const listener = () => {
    const state = store.getState();
    console.log(state);
}

//구독을 해제하고 싶을땐 unsubscribe()를 호출하면 된다.
const unsubscribe = store.subscribe(listener);

store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(ChangeText('안녕하세요~'));
store.dispatch(addToList({id:1,text:'와우'}));

 

디스패치

디스패치는 스토어의 내장함수중 하나이다.

디스패치는 액션을 발생시키는 것이라 이해하자.

dispatch 라는 함수에는 액션을 파라미터로 전달한다. 

이런식으로

//액션생성함수
function increase() {
    return {
        type : INCREASE
    };
}
..생략..
const store = createStore(reducer)

//action객체는 dispatch 메소드에게 전달되고, dispatch는 reducer를 호출해서 새로운 state를 만든다.
store.dispatch(increase());

 

 

구독(Subscribe)

구독(subscribe) 또한 스토어의 내장함수중 하나이다. subscribe 함수는 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

 

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독한다.

 

 

리덕스의 3가지 규칙

중요하다!

 

1.  하나의 애플리케이션에 하나의 스토어가 있다.

여러 스토어를 사용하는 것이 가능하기는 하나 매우 불편하므로 쓸모가 없다.

 

2. State는 읽기 전용이다. 

state는 직접수정이 불가능하다.

리액트에서 setState를 사용하고 배열을 업데이트할때 push를 사용하지 않고 spread 연산자나 concat을 이용하여 원본을 수정하지 않고 새로운 배열로 교체하였다.

 

리덕스에서도 마찬가지 이다. 기존의 객체는 건드리지 않고 Objecdt.assign을 이용하거나 spread 연산자를 사용하여 업데이트 한다.

 

리덕스에서 불변성을 유지하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위하여 shallow equality검사를 하기 때문이다.

shallow equality는 값까지 확인하지 않고 주소값만 빠르게 확인하여 겉핥기 식으로 비교하는 것이다. 이렇게 되면 깊숙한 안쪽까지 접근하지 않기 때문에 성능이 향상된다.

 

3. 리듀서는 순수함수여야 한다.

• 리듀서는 state와 action을 매개변수로 받는다.
• 이전 state는 절대 건들지 않고 새로운 state를 만들어 리턴한다.
• 매개변수인 state, action에 의해서만 리턴값이 결정된다.

동일한 인풋에는 동일한 아웃풋이 따른다. 그 어떤 외부영향도 받지 않고 오로지 인풋에 의해서만 아웃풋이 결정되는 것이 순수함수이다.

리듀서는 state와 action에 의해서만 새로운 state가 리턴된다.

 

new Date(), 랜덤 숫자 생성, 네트워크 요청등은 리듀서 함수의 바깥에서 처리해주어야 한다. 

그런것들을 위해 리덕스 미들웨어를 사용하곤 한다.