redux - 일반적인 폴더 구조 방식

연주·2023년 2월 5일

TIL

목록 보기

35/37

📌리덕스를 학습하기 위해 일단 폴더를 만들고 시작~!

✏️ 간단하게 CRA로 환경 구축

 npx create-react-app learn-redux

npx는 어디에 효과적일까?
create-react-app같은 보일러 플레이트 모듈에 효과적 입니다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어집니다. 어짜피 최신 버전만을 사용할 테니까요.

✏️ cd / learn-redux

npm install redux react-redux

redux : 실제 상태 관리패키지
react-redux : react와 redux를 연결하는 기능

✏️ redux 핵심 용어

STORE
ACTION
REDUCER
DISPATCH

store : 프로젝트의 모든 state를 가지고 있다 / 어디서든 쓸 수 있는 모든 state / 데이터가 담긴 저장소

action : what you wanna do
예를 들면, 카운터가 되는 것을 만들 것인데 여기서 기본값은 0 버튼을 누르면 1씩증가 / 증가되는 행동의 이름
행동하는게 아니라, 행동을 설명하는 것

reducer : 액션이 상태를 다음 상태로 변환하는 방법을 설명
일어날 일을 액션이라고 부르고 리듀서는 어떤 액션을 수행했는지 확인

dispatch : 액션과 리듀서를 확인해서 무엇을 할지 확인한 후 store를 업데이트

📌일반적인 폴더 구조 방식

필요없는 파일들 정리한 후,

📁 index.js

provider로 감싼 곳에서 리덕스 사용 가능

import { createStore } from 'redux';
import allReducers from './reducers';
import { Provider } from 'react-redux';

const store = createStore(allReducers)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

🔖 액션 설정

예를 들면, 증가하는 기능이니까 이름도 증가
대문자로!
액션은 객체를 반환하는 함수

📁 actions/index.js

함수의 이름을 정해준다!

// ACTION INCREMENT

const increment = () => {
  return {
    type: "INCREMENT"
  }
}
const decrement = () => {
  return {
    type: "DECREMENT"
  }
}

📁 reducer/counter.js

state는 0, action,type이 해당함에 따라 retrun 값이 바뀐다.
defalut값 꼭 설정해줘야함!

// REDUCER

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state;
  }
}
export default counterReducer;

카운터의 상태를 0으로 설정할 수 있도록 state = 0;
매개변수에 작업을 수행해야하니까 action을 넣고
이름에 따라 작업내용이 달라지니까 switch문을 사용

📁 reducer/isLogged.js

또 다른 함수이다.
기본값은 false고, action에 따라 리턴값이 달라짐

const loggedReducer = (state = false, action) => {
  switch (action.type) {
    case 'SIGN_IN':
      return !state;
    default:
      return state;
  }
}
export default loggedReducer;

📁 reducer/index.js

각각의 함수들을 하나로 모은다.
combineReducers !

import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
  counter: counterReducer,
  isLogged: loggedReducer
})

export default allReducers;

📁 App.js

dispatch를 이용해서 상태 변화를 시킨다!

import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./actions";
function App() {
  const counter = useSelector(state => state.counter)
  const isLoggend = useSelector(state => state.isLoggend)
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      {isLoggend ? <h3>로그인하세요</h3> : ""}
    </div>
  );
}

export default App;