Redux (4)
Redux (4)
🚀 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: 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;