리덕스 이용해서 count 만들어보기

modules 만들기

• modules 폴더에counter.js 파일 생성

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };

    // action.type이 MINUS_ONE 일 때 새로운 state 반환
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

모듈의 구성요소

1. initialState === 초기 상태값

// 초기 상태값
const initialState = {
 number: 0,
};

const [number, setNumber]= useState(0) <- 숫자 0

위의 초기 initialState 는 useState(0) 괄호안에 숫자와 같은것

2. Reducer === 변화를 일으키는 함수

아래의 코드를 리듀서 라고 합니다.
리듀서는 함수다.

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

    // action.type이 MINUS_ONE 일 때 새로운 state 반환
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

useState()를 사용할때 Number의 값을 바꾸고 싶을때 setNumber를 사용했습니다. 그걸 아래 코드처럼 변경할 수 있었습니다.

// 예시 코드

const onClickHandler = () => {
	setNumber(number + 1); // setState를 이용해서 state 변경
}

리덕스에서는 리듀서가 이 역할을 합니다.

// src/redux/modules/counter.js


// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter; // 여기

리듀서의 인자에 보면 (state = intialState, action) 이라고 되어 있습니다.

우리는 리듀서 인자 첫번째 자리에서는 state를, 두번째 자리에서는 action 이라는 것을 꺼내서 사용할 수 있습니다. 다만, state = intialState 처럼 state에 initialState를 할당해줘야 합니다.

3.카운터 모듈을 스토어에 연결하기.

configStore.js로 이동해서 아래 코드를 추가합니다.

import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

combineReducers({}) 안에 import 해온 모듈이 들어가게됩니다.

4. 스토어와 모듈 연결 확인

1.useSelector

컴포넌트에서 스토어를 직접조회하는 react-redux의 hook

const number = useSelector((state) => {
	return state
});

useSelector로 조회한 state를 사용하려면 아래의 코드처럼 이용하면됩니다.

  const number = useSelector((state) => state.counter.number);