1-14 Redux Counter (useSelector)

이번에는 state의 그룹인 modules를 만들어보자.

modules폴더안에
counter.js파일을 만든다.

우선 이 파일안에는 counter의 초기상태값이 필요하다. 

const initialState = {
  number: 0,
};

//리듀서: state에 변화를 일으키는 함수형태
//input: state와 action 이 두개가 들어간다 action은 type과 value를 포함한다.
//리듀서 함수안의 action안에있는 type에 따라서 변경하는 작업을 하게된다. 
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

configStore.js파일로 가서
const rootReducer = combineReducers({});안에 reducer함수를 import해온다.

그리고 {}안에 counter: counter를 넣어준다.
(키: 밸류의 이름이 같으면 함축시켜서 counter라고만 써줘도 가능하다.)


App컴포넌트에서 store에 접근하여, counter의 값을 읽어오고싶다면
useSelector를 사용한다.

import { useSelector } from "react-redux";
import "./App.css";

function App() {
  const counter = useSelector((state) => {
    return state.counter;
  });

  console.log(counter.number);
  return <div>redux!</div>;
}

export default App;

counter의 초기값인 number: 0이 잘 들어온걸 확인할 수 있다.