15일차 (Redux)

Redux 기본개념

1. Props 문법이 귀찮을 때

2. 상태관리 해야할 때 사용

3. Reducer: state를 수정하는 방법

4. Dispatch: 액션 객체를 가지고 store에 던져주는 역할

5. action: 객체이며, type과 payroad를 가짐
=> payroad는 props와 유사하다고 보면되고, Action 객체는 action type를 payload 만큼 처리

// State
Global state: 중앙 state 관리소(어디서든 가능, prop로 내려주지 않아도 됨)
Local stae: 컴포넌트 내에서 사용하는 state

 

 

Redux 폴더 설명

1. redux: 리덕스 관련 코드를 모두 몰아넣음

2. redux/config:  리덕스 설정 관련 파일 전부

3. redux/config/configStore.jx: 중앙 state 관리소 -> 설정 코드

4. Modules: state의 그룹(리듀서 등 저장)

 

 

useSelector

function App() {
  // store에 접근하여 counter의 값을 읽어오고 싶을 때
  const data = useSelector((state) => {
    // counter만 가져오고 싶을 떄 state.counter
    console.log(state);
  });

  return <div>redux!</div>;
}

 

 

리듀서와 useDispatch

//초기 상태값이 필요
const initialState = {
  number: 0,
};
=> const [number, setNumber] = useState(0)에서 0과 같은 의미

// 리듀서: state의 변화를 일으키는 함수(여기서는 counter)
// input에는 state와 action(state의 수정 방법)을 받음

const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case "conter/MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

이 때 App.jsx는 
onClick={() => {
          // +1 동작
          dispatch({
            type: "PLUS_ONE",
          });
        }}
        
=> 모듈이 가지고 있는 action.type과 같은 동작을 수행

 

만약 type의 이름을 바꾸고 싶다면? => 변수형태로 관리하기

1. actionCreater과 actionValue 사용
=> 위의 두 개를 사용하는데 이것은 modules에 있는 파일(리듀서)에서 변수 선언하는 방식임

2. counter.js 에서 만든 action value를 import에 하면 되고, action value는
export const PLUS_ONE = "counter/PLUS_ONE";

3. actionCreater는 객체를 리턴하는 함수이며,
counter.js에서
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

이렇게 만들고,
App.js에서
onClick={() => {
          // +1 logic
          dispatch(plusOne());
        }}
=> 이렇게 가져오면 끝