이번에는 Cookie를 판매하는 파트를 Redux를 이용하여 만들도록 하겠습니다.
일단 위의 폴더에서 CookiePart.js component와 cookie폴더가 추가 되었습니다. 2개의 component는 구조가 비슷하지만 toy와 달리 CookiePart component는 구입, 판매 수량을 조절할수 있습니다.
이제 toy폴더와 같이 3개의 js파일(cookieAction.js, cookieReducer.js, cookieTypes.js)을 생성합니다.
export const BUY_COOKIE = "BUY_COOKIE"; // 쿠기를 사기위한 타입 입력
export const SELL_COOKIE = "SELL_COOKIE"; // 쿠기를 팔기위한 타입 입력
cookieType.js파일을 위와같이 코딩해 줍니다.
import { BUY_COOKIE, SELL_COOKIE } from './cookieTypes';
export const buyCookie = (num = 1) => {
return {
type : BUY_COOKIE,
payload : num
}
}
export const sellCookie = (num = 1) => {
return {
type : SELL_COOKIE,
payload : num
}
}
이제 cookieAction.js 부분도 위와같이 코딩을 해줍니다. 다만 이전 toyAction.js와 다른점은 함수인자가 추가된 것입니다. cookie부분은 사용자가 판매, 구매 수량을 조절할수 있게 하기 위해서 num인자를 추가했습니다. 하지만 인자가 추가되지 않는 상황을 대비하여 숫자가 들어오지 않을시 default value를 1로합니다.
// cookieTypes에서 구매와 판매 타입을 받아온다.
import { BUY_COOKIE, SELL_COOKIE } from './cookieTypes';
const initialState = {
numOfCookie : 20 // 초기 쿠기 갯수는 20개
};
// cookieReducer는 이전 toyReducer와 달리 payload에 따라 수량이 변화한다.
const cookieReducer = (state = initialState, action) => {
switch(action.type){
case BUY_COOKIE: // 가게에서 쿠키를 사기 때문에 -payload한다.
return {
...state,
numOfCookie : (state.numOfCookie - action.payload)
}
case SELL_COOKIE: // 가게에서 쿠키를 사기 때문에 +payload한다.
return {
...state,
numOfCookie : (state.numOfCookie + action.payload)
}
default : return state // 해당 타입이 아니면 그대로 state를 return 한다.
}
}
export default cookieReducer;
기존 toyReducer코드와 거의 비슷하지만 cookieReducer.js은 +-1이 아닌 +- action.payload로 하게 된다. 실제로는 num값에 따라 numOfCookie가 조작되게 된다.
export { buyToy, sellToy } from './toy/toyAction';
// cookieAction.js에 따라 추가된 코드
export { buyCookie, sellCookie } from './cookie/cookieAction';
이제 index.js파일을 추가된 조건에 따라 코딩을 해줍니다.
import toyReducer from './toy/toyReducer';
import cookieReducer from './cookie/cookieReducer';
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
toyReducer,
cookieReducer
})
console.log("rootReducer : ", rootReducer);
export default rootReducer;
마지막으로 rootReducer.js파일을 위와같이 코딩하여 주시기 바랍니다. combineReducers는 여러개의 reducer를 통합하기 위한 method입니다. 여기서 toyReducer, cookieReducer를 통합하고 그것을 rootReducer로 넣어줍니다.
그리도 rootReducer를 export하여 store를 만들때 사용합니다.
이로써 Redux코드는 모두 작성하였습니다. 다음은 component(CookiePart.js)와 App.js를 추가하도록 하겠습니다.
이전글 : React-Redux_기초3 components폴더 및 App.js 코딩
다음글 : React-Redux_기초5 새로운 component생성하고 React실행
댓글
댓글 쓰기