[React] Redux 기본셋팅

리덕스 시작하기

✔ 리덕스 설치파일

npm install

1. redux
2. react-redux
3. redux-logger

✔ 리덕스에서 사용 할 파일들

App.js
index.js
reducer.js (생성)

✔ 리덕스 사전 설정

import

import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import Reducer from "./module/Reducer";

import Logger "redux-logger";
// redux가 움직일 때 로그를 찍어주는 미들웨어

환경설정

const store = createStore(Reducer,applyMiddleware(Logger));
// 리덕스의 액션이 최종적으로 도달하는 곳
(생성한 reducer 넣어주고, 뒤에 미들웨어 넣는 순서)

index.js의 <App />부분에 Provider 감싸주기
<Provider store={store}>
<App />
</Provider>

기본셋팅

	1. initialState 만들기 
    2. 액션타입 설정
    3. 액션 생성함수 만들기
    4. 리듀서 생성

✍ 예제

📋 Reducer.js

1. initialState 만들기

const initialState = {number : 0, ···}
//상태의 기본값을 설정하는 것

2. 액션타입 설정

const SET_DIFF = "SET_DIFF";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
// 액션을 했을 때 어떤 타입의 액션이 움직이는 지 네이밍 해주는 것 (웬만하면 같이?)

3. 액션 생성함수 생성

export const setDiff = (parameter) => ({ type: SET_DIFF, parameter });
//파라미터를 넣은 타입의 생성함수
<br>
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
//파라미터를 안넣은 타입의 생성함수
<br>
다른 파일에서 액션 생성함수를 사용 할 수 있게 export 처리 해주기

4. 리듀서 생성

export default function counter(state = initialState, action) {
  switch (action.type) {
    case SET_DIFF:
      return {
        number: parseInt(state.number + action.diff)
      };
    case INCREASE:
      return {
        number: state.number + 1
      };
    case DECREASE:
      return {
        number: state.number - 1
      };
    default:
      return state;
  }
  // default : return state 를 필수로 넣어야함 아니면 에러뜸 
  (액션을 실행 했는데 아무 타입도 아니면 초기 지정값을 실행 한다는 뜻)
  <br>
  //initialState의 값을 불러올 땐 state.불러올 변수
  <br>
  //만약 initialState에 값이 2개 이상 일 때 
  const initialState = {number : 0, string:""}
  <br>
  case 타입 : 
   return {
    ...state, // initialState는 하나 이상일 때 바꾸면 안되고 불변성을 위해 복사해 와서 사용
    바꿀 변수 : 값
   }
}

📖 오늘의 결론

리덕스 사용 루틴을 익히자

1. initialState 만들기 
2. 액션타입 설정
3. 액션 생성함수 만들기
4. 리듀서 생성