//payload =>액션 객체에는 type도 있지만 payload(데이터화물차)도있음
//payload는 데이터를 전달하는 객체로
//ation이 처리 될 때 payload 만큼 처리 해라 라고 예시를 둘 수 있음
//**`Erik Rasmussen` 이 제안한 Ducks 패턴은 아래의 내용을 지켜 모듈을 작성하는 것 입니다.**
// 1. Reducer 함수를 `export default` 한다.
// 2. Action creator 함수들을 `export` 한다.
// 3. Action type은 `app/reducer/ACTION_TYPE` 형태로 작성한다.
// (외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)
// 그래서 모듈 파일 1개에 `Action Type`, `Action Creator`, `Reducer` 가 모두 존재하는 작성방식입니다.
//action value 문자열을 직접 넣는것이 아닌 상수로 만들어서 관리
//전 시간에는 App.js dispatch를 직접 입력했기에 export로 action value를 export로 넘겼음
const Plus_N ="counter/PlusN"
const Minus_N = "counter/MinusN"
//action create => dispatch로 함수를 만들어서 직접 타입과 코드들을 입력하는 것이아니라
//함수로 만들어서 관리
//payload를 받아서 처리
export const plus_N = (payload)=>{
return {
type:Plus_N,
payload,
}
}
export const minus_N = (payload)=>{
return {
type: Minus_N ,
payload : payload ,
}
}
const initiaState = {
number : 0
}
const counter = (state=initiaState,action)=>{
switch (action.type){
//state가 오브젝트라 아래의 방법을 씀
case Plus_N:
// payload만큼 +
return {number :state.number + action.payload}
case Minus_N:
// payload만큼 -
return {number :state.number - action.payload}
default:
return state;
}
}
export default counter;
//ex)App.js
import React, { useState } from 'react'
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux'
import { minus_N ,plus_N } 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();
//action payload 로 보낼 state
const [number ,setNumber] =useState(0);
return (
<>
<div>현재 카운트 : {counter.number}</div>
<input type='Number' value={number} onChange={(event)=>{
//+ 를 붙이면 숫자로 변환 해줌
setNumber(+event.target.value)}}/> <br/>
<button onClick={()=>{
//+1을 해주는 로직을 써주면 된다.(모듈에 있는 맞는 type dispatch로 보낸다)
// dispatch({
// type:PlusN,
// payload: number
// }) action create로 위의 함수를 counter에서 관리 plus_N라는 함수를 만든 후 import로 사용
dispatch(plus_N(number));
}}>+</button>
<button onClick={()=>{
dispatch(minus_N(number))
}}>-</button>
</>
)
}
export default App