12월6일 -til

redux module을 만드는 방법

1.modules 폴더에 counter.js 파일을 생성한다.

2.counter.js 에 코드를 작성한다.

// src/modules/counter.js

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

// 리듀서(변화를 일으키는 함수)
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

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

우리는 지금까지 모듈파일에서 초기 상태값과 리듀서를 작성했습니다. 이제 우리가 만든 모듈을 스토어에 연결 시켜야 합니다. 아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 우리가 만든 State를 스토어에서 꺼낼 수 없습니다.

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

// src/redux/modules/config/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;

위와 같이 코드를 추가하면, 스토어와 모듈이 연결됩니다

스토어와 모듈 연결 확인하기

듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 됩니다. 컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 ‘react-redux’의 훅을 사용해야 합니다.

useSelector의 사용법

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
	console.log(state)
	return state
});

App.js 컴포넌트로 이동해서 기존에 있던 코드를 모두 지우고, 아래 코드를 입력해주세요.

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.

const App = () => {
  const counterStore = useSelector((state) => state); // 추가해주세요.
  console.log(counterStore); // 스토어를 조회해볼까요?

  return <div></div>;
}

export default App;

우리는 컴포넌트에서 스토어를 조회할 때
react-redux에서 제공하는 useSelector 라는 훅을 사용합니다. (너무너무 중요 🔥)
브라우저를 켜고, 그 안에 counter 라는 값이 있는 것을 볼 수 있습니다. 우리가 만든 counter 라는 모듈의 state가 보이는 것을 알 수 있습니다. 이렇게 화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state 인 것 입니다.

컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용하면 됩니다.

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

아직 흐름이 대해선 이해를 하였지만 crud를 더 연습을 해야겠다라는 생각이 들었다ㅠ.