//Action-Value-Creator
//리듀서의 case (action.type)은 여러 컴포넌트에서 사용할 수 있으므로
//하나하나의 이름을 약속해서 쓰더라도 ex)리듀서/타입이름 ->counter/Plus
//Action.type 이름을 바꾸면 컴포넌트에서의 action 타입 리듀서내의 action타입
//하나의 type을 바꾸는데 여러곳에서 바꿔야 하는 불편함이 있음
//그래서 Action Value 로 하나의 컴포넌트에서 상수로 만들어서 사용하면 편리함
//기본구조 export const 상수이름 = "타입이름"
//action create => dispatch로 함수를 만들어서 직접 타입과 코드들을 입력하는 것이아니라
//함수로 만들어서 관리 =>하나하나 하드코딩보단 함수로 만들어서 관리하는것이 휴먼에러나 코드적으로 편리
//ex) modules/counter
//action value 문자열을 직접 넣는것이 아닌 상수로 만들어서 관리
//컴포넌트에서 써야하기 때문에 export
export const Plus ="Plus"//action value
export const Minus = "Minus"//action value
//action create => dispatch로 함수를 만들어서 직접 타입과 코드들을 입력하는 것이아니라
//함수로 만들어서 관리
//컴포넌트에서 써야하기 때문에 export
export const plus = ()=>{//action create
return {
type:Plus
}
}
//로컬state방식 => const [number, setNumber] =useState(0)
//글로벌 state 초기 상태값 (state)
const initiaState = {
number : 0
}
//리듀서 :'state에 변화를 일으키는' 함수
//(1)state를 action의 type에 따라 변경하는 함수
//input :state와 action 을 받는다
//아래 코드가 예시로 만든 리듀서임
//만든 리듀서는 스토어 (configstore)에 임포트와 root에 추가 해야 쓸 수 있음
const counter = (state=initiaState,action)=>{
switch (action.type){
case Plus: //type이 Plus면 state에 +1 해주는 코드
//state가 오브젝트라 아래의 방법을 씀
return {number: state.number +1,}
case Minus:
return {number: state.number-1}
default:
return state;
}
}
export default counter;
//App.js
import React from 'react'
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux'
import { Minus ,plus } from './redux/modules/counter';
function App() {
//여기에서 store에 접근해 ,추가된 리듀서(함수)
//useSelector < 리덕스의 hook (접근하는 함수)
const counter = useSelector((state)=>{
//state 는 Store에 추가된 모든 함수(리듀서)를 가져옴
//특정 함수만 가져오고 싶으면 state.counter 이런식으로 가져 올 수 있음
return state.counter;
});
//dispatch를 가져와 보자 리액트-redux hook
const dispatch =useDispatch();
console.log("couter", counter.number)
return (
<>
<div>현재 카운트 : {counter.number}</div>
<button onClick={()=>{
//+1을 해주는 로직을 써주면 된다.(모듈에 있는 맞는 type dispatch로 보낸다)
// dispatch({
// type:Plus,
// })
dispatch(plus()); //counter.js (모듈) 에서만든 action create를 import 해서 호출
//plus의 반환값을 객체로 {type:Plus}이르모 위에 주석처리 된 코드와 같음
}}>+</button>
<button onClick={()=>{
dispatch({
type: Minus //counter.js (모듈) 에서만든 action value를 import 해서 호출
//리듀스 case Minus로 잘 가짐
})
}}>-</button>
</>
)
}
export default App