TIL(9)리덕스 순서

지난 글

https://jaeilit.tistory.com/30

TIL(7)REDUX_1편

---

다시 짚어보기

코드 순서

 

상태관리

 

1. action type 

2. action function

3. reducer

4. createStore()

5. dispacth()

 

번외, 

6. subscribe 설정

7. 미들웨어 logger

 

---

1. action type 정의

//  액션 타입 정의

const INCRE_COUNT = "INCRE_COUNT"
const DECRE_COUNT = "DECRE_COUNT"

2. action function 생성

// 액션 함수 생성

const incre_count = () => {
  return { type: "INCRE_COUNT" }
}

const decre_count = () => {
  return { type: "DECRE_COUNT" }
}

3. 초기값(initialState) 설정 후 reducer

//  초기 값 설정

const initialState = {
  cnt: 1,
}

//  리듀서 설정, 실제로 액션 함수를 핸들링 할 함수

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCRE_COUNT: {
      return {
        ...state,
        cnt: state.cnt + 1,
      }
    }
    case DECRE_COUNT: {
      return {
        ...state,
        cnt: state.cnt - 1,
      }
    }
    default:
      return state
  }
}

4. createStore()

const store = createStore(reducer)

//  스토어를 만들어준다.

// createStore(리듀서)

// 여러개의 리듀서라면 combinereducer 로 묶어 줄 수도 있다.

//  리덕스 기능
// {
//   dispatch: [Function: dispatch],
//   subscribe: [Function: subscribe],
//   getState: [Function: getState],
//   replaceReducer: [Function: replaceReducer],
//   '@@observable': [Function: observable]
// }

 5. dispatch 해보기

console.log(store.getState())

// state 보기
// { cnt: 1 }

console.log(store.dispatch(incre_count()))

//  +1 의 내용이 담긴 디스패치 액션 호출
//  state 호출하기 store.dispatch를 통해서 호출하는데 호출 할 때는 액션 함수를 넣어준다.
//  { type: 'ADD_COUNT' }

console.log(store.getState())

//  state 호출로 인해 cnt 가 + 1 된 상태를 보여줌
// { cnt: 2 }

console.log(store.dispatch(decre_count()))

// -1 을 해 줄 액션함수 디스패치로 호출
//  state 호출하기 store.dispatch를 통해서 호출하는데 호출 할 때는 액션 함수를 넣어준다.
//  { type: 'ADD_COUNT' }

console.log(store.getState())

// 다시 -1가 된 모습
// { cnt: 1 }

7. 구독 설정 subscribe

store.subscribe(() => {
  console.log(store.getState())
})

// 총 + 5번

store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())

// 총 -3 번

store.dispatch(decre_count())
store.dispatch(decre_count())
store.dispatch(decre_count())
store.dispatch(decre_count())

// 출력 값

// {cnt: 2}
// {cnt: 3}
// {cnt: 4}
// {cnt: 5}
// {cnt: 6}
// {cnt: 5}
// {cnt: 4}
// {cnt: 3}
// {cnt: 2}

8. 미들웨어 applyMiddelware, logger

const reduxlogger = require("redux-logger")

const logger = reduxlogger.createLogger()

const store = createStore(reducer, applyMiddleware(logger))

// 총 + 5번

store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())
store.dispatch(incre_count())

// 총 -3 번

store.dispatch(decre_count())
store.dispatch(decre_count())
store.dispatch(decre_count())
store.dispatch(decre_count())


// 출력 값 :

// action INCRE_COUNT @ 23:05:32.343
//    prev state { cnt: 1 }
//    action     { type: 'INCRE_COUNT' }
//    next state { cnt: 2 }
//  action INCRE_COUNT @ 23:05:32.347
//    prev state { cnt: 2 }
//    action     { type: 'INCRE_COUNT' }
//    next state { cnt: 3 }
//  action INCRE_COUNT @ 23:05:32.348
//    prev state { cnt: 3 }
//    action     { type: 'INCRE_COUNT' }
//    next state { cnt: 4 }
//  action INCRE_COUNT @ 23:05:32.351
//    prev state { cnt: 4 }
//    action     { type: 'INCRE_COUNT' }
//    next state { cnt: 5 }
//  action INCRE_COUNT @ 23:05:32.352
//    prev state { cnt: 5 }
//    action     { type: 'INCRE_COUNT' }
//    next state { cnt: 6 }
//  action DECRE_COUNT @ 23:05:32.353
//    prev state { cnt: 6 }
//    action     { type: 'DECRE_COUNT' }
//    next state { cnt: 5 }
//  action DECRE_COUNT @ 23:05:32.355
//    prev state { cnt: 5 }
//    action     { type: 'DECRE_COUNT' }
//    next state { cnt: 4 }
//  action DECRE_COUNT @ 23:05:32.356
//    prev state { cnt: 4 }
//    action     { type: 'DECRE_COUNT' }
//    next state { cnt: 3 }
//  action DECRE_COUNT @ 23:05:32.357
//    prev state { cnt: 3 }
//    action     { type: 'DECRE_COUNT' }
//    next state { cnt: 2 }

출력 설명 :

action 호출 된 타입명과 시간

이전 값 prev state 

액션 호출 

변한 값 next state

 

를 볼 수 있다.