Redux (4)

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

(...)
 
/* 2. 액션 생성 함수 만들기 및 액션 내보내기 */
 
export const red = () =>({type:"RED"})
export const green = () =>({type:"GREEN"})
export const blue = () =>({type:"BLUE"})
export const pink = () =>({type:"PINK"})

//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;

//store/index.js
 
/* 4. 루트 리듀서 만들기 */
 
export default combineReducers({
  color,
});

//src/index.js
 
/* 5. 스토어 만들기 */
 
const store = createStore(rootReducer, composeWithDevTools());

//src/index.js
 
/* 6. Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 */
 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

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: color }}>컬러 : {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;