[React.js] Redux (4)

카테고리 : Development
태그: development · reactjs · redux-toolkit · state · action
등록일: 2023년 04월 18일
최근 업데이트: 2023년 04월 18일

---

• 🚀 Redux 작업 순서
  • 1. 액션 타입 정의하기
  • 2. 액션 생성 함수 만들기 및 액션 내보내기
  • 3. 초기 상태 및 리듀서 함수 만들기
  • 4. 루트 리듀서 만들기
  • 5. 스토어 만들기
  • 6. Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기
  • 7. 컨테이너 컴포넌트 만들기

🚀 Redux 작업 순서

1. 액션 타입 정의하기

(...)
/* 1. 액션 타입 정의하기 (const 변수 = "파일명/액션명") */

const RED = "color/RED"
const GREEN = "color/GREEN"
const BLUE = "color/BLUE"
const PINK = "color/PINK"

2. 액션 생성 함수 만들기 및 액션 내보내기

(...)

/* 2. 액션 생성 함수 만들기 및 액션 내보내기 */

export const red = () =>({type:"RED"})
export const green = () =>({type:"GREEN"})
export const blue = () =>({type:"BLUE"})
export const pink = () =>({type:"PINK"})

3. 초기 상태 및 리듀서 함수 만들기

//3. 초기값 및 리듀서 생성

const initialState = {
  color: "green",
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_COLOR:
      return {
        color: action.color,
        //action.매개변수
      };
    default:
      return state;
  }
};

export default reducer;

4. 루트 리듀서 만들기

//store/index.js

/* 4. 루트 리듀서 만들기 */

export default combineReducers({
  color,
});

5. 스토어 만들기

//src/index.js

/* 5. 스토어 만들기 */

const store = createStore(rootReducer, composeWithDevTools());

6. Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기

//src/index.js

/* 6. Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 */

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

7. 컨테이너 컴포넌트 만들기

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { blue, green, pink, red } from "../store/modules/color";

/* 7. 컨테이너 컴포넌트 만들기 */

const Color = () => {
  // const state담을이름 = useSelector( state => state.리듀서파일명.state명 )
  const color = useSelector((state) => state.color.color);
  // 두번째는 리듀서파일명 , 세번째는 initalstate
  const dispatch = useDispatch();
  return (
    <div>
      <h1 style=>컬러 : {color}</h1>
      <p>
        <button onClick={() => dispatch(red())}>red</button>
        <button onClick={() => dispatch(green())}>green</button>
        <button onClick={() => dispatch(blue())}>blue</button>
        <button onClick={() => dispatch(pink())}>pink</button>
      </p>
    </div>
  );
};

export default Color;