이십오일.S3-Unit4 블로깅 과제

Redux에서 데이터 흐름에 대해서 블로깅을 해야하는데 나는 데이터 흐름도 정리하며 실제로 그것들이 코드에서 어떻게 적용 되는지를 작성해보고자 한다. 자주 까먹는 나는 이거 어떻게 했더라라는 생각을 자주하는 편이기 때문이다.

Redux에서의 데이터흐름은 Action -> Dispatch -> Reducer -> Store 순으로 흘러간다.

좀 더 자세히 풀어보자면
1. 상태가 변경되어야하는 이벤트가 발생 -> 변경될 상태에 대한 정보가 담긴 Action 객체 생성!
2. Action 객체는 dispatch 함수의 인자로 전달!
3. dispatch 함수는 Action 객체를 Reducer 함수로 전달!
4. Reducer 함수는 Action 객체의 값을 확인하고 그 값에 따라 전역 상태 저장소 Store의 상태를 변경!
5. 상태 변경시 React 화면 재렌더링!
이렇다.

실제로 데이터 흐름은 위에서 말한 것 처럼 흘러가지만 유어클래스의 내용에 따라 코드 작성법도 정리해보려고 하는데 유어클래스에서는 순서를 Store -> Reducer -> Action -> Dispatch(useDispatch) -> useSelector 이렇게 준다. 꼭 이렇게 해야한다는 아닌거 같지만 코드를 짜는 실습에서 조금 더 쉽게 와닿았다. 그렇기 때문에 각 과정에 관한 설명도 이 순서대로 해보고자 한다.

아, 그전에 이번 이론 공부를 통해 알게 된 것은 export를 const 앞에 붙이게 되면 다른 파일들에서도 사용할 수 있게 된다. public정도로 생각하면 될 거 같다.

1️⃣ Store

상태가 관리되는 오직 하나의 저장소 역할을 한다.

//store 생성 코드
import { legacy_createStore as createStore } from 'redux';
const store = createStore(reducer이름);

provider 컴포넌트로 store을 손쉽게 사용할 수 있다. 그렇기 때문에 코드 작성시 provider 컴포넌트가 app 컴포넌트를 감싸야한다.

//provider 사용 예시 코드
import { Provider } from 'react-redux';
<Provider store={store}>
    <App />
 </Provider>

2️⃣ Reducer

dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태 변경을 시키는 함수로 순수함수(외부 요인에 의해 변경되지 않음)여야한다.
redeucer의 첫번째 인자에는 기존 state이 들어간다.(처음 생성 시 당연히 초기 값이 들어간다) 두번째 인자에는 Action 객체가 들어가고 Action객체에서 정의한 Type에 따라 새로운 state이 리턴 된다.

리턴되는 state 값이 새로운 상태값이 된다.

//reducer 함수 예시 코드
export const Reducer = (state = state, action) => {
//switch문을 이용하여 action.type에 맞는 state을 리턴함
  switch (action.type) {
    case 'INCREASE':
      return state + 1;

    case 'DECREASE':
      return state - 1;

    default:
      return state;
  }

일단은 적어보는!
여러개의 reducer 사용시 해결방법 :
combineReducers 메서드를 사용한다.

import {combineReducers} from 'redux'
const rootReducer = combineReducers({여러 reducer 이름})

3️⃣ Action

어떤 Action을 취할것인지 정의해 놓은 객체로 형태에 따라 두가지로 나뉜다.
어떤 형태이든 안에 Type은 필수 이고 Payload는 구체적인 값이 있을때만 필요로 한다.

• Action 객체 자체

//type만 사용
{type : '이름'}

//payload도 사용
{type : '이름', payload : 5}

• Action 생성자 함수

//type만 사용
export const increase = () => {
  return {
    type: 'INCREASE'
  };
};

//payload도 사용
export const setNum = (num) => {
  return {
    type: 'SETNUM'
    payload : num
  };
};

4️⃣ Dispatch

dispatch를 사용하기 위해서는 redux hooxs의 useDispatch() 메서드를 사용해야한다. useDispatch는 dispatch 함수 반환 메서드이다.

//dispatch 사용 기본 셋팅
import {useDispatch} from 'react-redux'
const dispatch = useDispatch();

//dispatch 사용 방법
//액션 자체 사용
dispatch({type:'이름'});
//액션 생성자 사용시
dispatch(action 함수 이름());

5️⃣ useSelector

내 생각에 가장 중요한 메소드이지 않을까 싶다. 바로 state에 접근 가능하게 하는 메소드이다. 컴포넌트와 state을 연결하여 redux의 state에 접근을 한다.

import {useSelector} from 'react-redux'
const 변수1 = useSelector(state => state)
//변수1에 state에 저장된 모든 state가 담긴다.

이렇게 Redux의 데이터 흐름에 대해 블로깅 해보았다. 이 블로깅 한것을 토대로 프로젝트도 진행한다면 쉽게 할 수 있지 않을까? 라는 생각이 든다!