🔍 Redux

리덕스는 상태관리를 쉽게 만들어주는 것이다.

상태관리를 위해 사용하지만 react가 아닌 vanilla javascript나 vue에서도 사용이 가능하다.

리덕스를 사용하는 이유는 state를 예측가능하게 만들어주고 유지보수가 쉬우며 디버깅에도 유리하다.

용어

• Store : 상태가 관리되는 오직 하나의 공간(Store)이다.

• Action(javascript Object) : reducer에서 새로운 state을 만들때 사용된다.

• Reducer : 변화를 일으키는 함수이며 순수한 함수이다. 이전 state와 action을 합쳐서 새로운 state를 return한다.

• state : 저장되는 data이며 읽기전용이다.

Store생성

먼저 state를 저장할 공간인 store을 createStore를 이용해서 생성한다. 아래의 코드처럼 createStore는 reducer라는 함수를 인자로 받는 함수이다. 이제 state를 저장하는 공간은 생성이 된 것이다.

import { createStore } from "redux";

const store = createStore(reducer);
// createStore는 reducer라는 함수를 인자로 받는 함수이다.

console.log(store.getState());

• subscribe : store의 함수들 중 subscribe는 우리에게 store안에 있는 변화들을 알 수 있게 해준다. 이 subscribe함수는 store에 변화가 있을때마다 감지해서 불려진다.

• getState : store의 함수들 중 getState는 state값을 가져올때 사용한다.

Reducer

reducer함수에서 return되는 값이 data가 되고 이 data를 가져오기 위해서는 createStore를 담은 변수 store에 getState함수를 실행하면 된다. 그리고 reducer함수는 store에 저장되는 data를 modify하는 함수이다.

import { createStore } from "redux";

const reducer = (state) = {
	//modify state
  return state;
};

const store = createStore(reducer);

reducer에서 state의 data를 return할 때 중요한 점은 이전의 state에 변화를 주지 않고 새로운 state를 return 해야한다는 것이다.

Action

reducer함수에서 data의 값을 변하게하는것이 action이다. reducer에서 두번째 parameter이다.

그럼 action을 어떻게 reducer에 전달할까?

dispatch함수를 이용해서 action을 보낼 수 있다. 그리고 dispatch의 인자는 꼭 object이여야하며 키는 type가 있어야한다.

const reducer = (state = 0, action) => {
  switch (action.type) {
    case ADD:
      return count++;
    case MINUS:
      return count--;
    default:
      return count;
  }
};

const store = createStore(reducer);

store.dispatch({ type : ADD, text : text });

Reference

• 리덕스 왜 쓸까?
  https://velopert.com/3528

• React + Redux 플로우의 이해
  https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6

• 리덕스
  https://velopert.com/3533