React:Redux기초

Redux의 핵심 5가지
➡️ Action, Reducer, Store, Dispatch, Subscribe

Redux 패키지 설치

먼저, Redux 패키지를 설치해주자

$ yarn add redux

1. Store

import { createStore } from "redux";

리덕스 패키지를 설치하면 이제부터 리덕스에서 createStore 라는 함수를 사용할 수 있다.

• createStore: 데이터를 넣어주는 저장소의 역할

대부분 앱에서 '데이터'라고 한다면 보통 State를 데이터라고 하는데, State는 Modified되는 Data 이다.

어떤 값이 변하면 그 값에 따라 사용자에게 보여지는 부분이 달라 지게 하는게 리액트에서의 State였으면 Redux의 State 도 동일하다.

만약 카운터 앱을 만든다고 하면 올라가는 숫자가 state가 되는 거다.

이런 state를 store에 넣는 것이다.

그리고 state를 store에 넣는 것을 가능하게 하는 것이 바로 createState 이다.

하지만, 여기서 store에 createStore state를 넣는 것이 아니라 state를 변경시키는 함수를 넣어야 한다.
이 변경시키는 함수가 reducer 가 되는 것이다.

즉, state(어떤 값이 변했을 때 사용자에게 보이는 부분이 달라지게 하는 것)를 변경시키는 함수인 reducer를 (state를 직접적으로 넣는다는게 아니란 말) createStore을 이용하여 store에 넣어준다.

const reducer = () => {};

const store = createStore(reducer);

---

const reducer = () => {};

const store = createStore(reducer);

console.log(store);

>>> dispatch, subscribe, getState, replaceReducer

store를 콘솔로 출력하면 위와 같이 4가지의 함수가 나온다.

• dispatch : action을 발생시켜 state를 변하게 만드는 장본인
• subscribe : state 값이 변하는지 감시하는 cctv 격
• getState : state를 얻을 수 있게 하는 getter 함수

2. Reducer

➡️ 데이터를 수정하는 함수

state는 변하는 데이터를 의미하고 reducer 함수는 이러한 state를 변경시키는 함수이다.

이 함수가 return 하는 값이 state가 되는 것이다.

만약 reducer 함수에 return으로 "Hello"라는 스트링을 준다면 store에 있는 state는 Hello가 된다.

const reducer = () => {
    return "hello";
}

const store = createStore(reducer);

console.log(store.getState());

>>> hello

그렇다면, reducer을 어떻게 사용하는데 ? 🧐

1. reducer에게 인자를 넘긴다.
2. reducer는 인자를 받고 어떤 로직을 실행시킬지 결정한다.
3. 해당 로직을 수행한 결과로 state를 반환한다.
4. 반환된 state는 우리의 새로운 state가 된다.

여기서 말하는 인자는 Action이다.

3. Action

➡️ reducer와 소통하는 매개체

만약 카운팅하는 앱을 만든다고 하면 reducer에서 'state + 1'이나 'state - 1'을 수행해야 되는데, 이를 Action으로 구분한다.

const reducer = (state, action) => {
   return state;
}

const store = createStore(reducer);

reducer의 두 번째 인자로 action이 들어가는데, 이 action은 우리가 reducer와 소통하는 매개체이다.

reducer에게 무슨 일을 할지 action으로 대화하는거고 reducer는 action에 따라서 return해주게 된다.

4. Dispatch

➡️ 이 action을 어떻게 전달해주는 것이 바로 Dispatch이다.

앞에서 store를 콘솔로 출력하면 dispatch가 나오는 것을 확인하였는데,

그 dispatch를 이용해서 우리는 action을 전달한다. store.dispatch() 의 매개변수에 어떤 Action인지 객체 형태로 보내준다.

const reducer = (state, action) => {
  return state;
}
const store = createStore(reducer);

store.dispatch({type: "ADD"})

5. Subscribe

➡️ 변화를 감지한다

Dispatch를 통해서 Reducer의 state를 변경시킬 때 마다 Subscribe는 움찔하는데, 그 움찔을 통해서 변화를 감지한다.

Subscribe 또한 매개변수로 함수가 들어가게 되는데, 그 함수는 변화가 있을 때 어떤 행동을 할지에 대한 함수이다.

const reducer = (state = 0, action) => {
  if(action.type === "ADD") state + 1;
  return state;
}
const store = createStore(reducer);

store.dispatch({type: "ADD"})

const onChange() => {
  console.log("changed");
}

store.subscribe(onChnage);

이렇게 준다면,

const reducer = (state = 0, action) => {
  if(action.type === "ADD") state + 1;
  return state;
}
const store = createStore(reducer);

const onChange() => {
  console.log("changed");
}

store.subscribe(onChnage);

store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})

>>> changed
>>> changed
>>> changed
>>> changed
>>> changed

변화가 감지될 때 마다 subscribe가 호출되는 것을 볼 수 있다.







📚참고자료 : https://wonit.tistory.com/344?category=822790