||리덕스 초심자 #3|| Redux Store

공식문서에 따르면 redux는 A Predictable State Container for JS Apps이다.
따라서 state와 state가 predictable하도록 액션을 지정해둘 저장소가 필요하다.
그 저장소를 store라고 한다.

store는 기본적으로 이렇게 구성한다.

import { createStore } from 'redux'

//액션타입을 문자열 그대로 쓰면 오타가 났을때 발견하기 힘들기 때문에 변수화시킨다.
//하지만 이로 인해서 액션타입을 부를때 마다 코드가 길어져 가독성이 떨어지기도 한다.
const ActionTypes = {
  Counter_Incremented:'counter/incremented'
}

//Action을 만든다. payload가 없을 수도 있다.
const counterIncremented = (data) => {
  type: ActionTypes.Counter_Incremented,
  payload: data
}

//Reducer를 만든다. state 오른쪽에는 초기값을 지정한다.
//return할때에 반드시 새로운 state를 반환해야 함을 잊지 말자.
const reducer = (state={value:0}, action) => { 
  switch (action.type) {
    case ActionTypes.Counter_Incremented:
      return { value: state.value + 1 }
  }
}

//다른 곳에서 action을 불러다 쓰기 쉽도록 
//actionCreators 객체로 묶어서 export 해준다.
export const actionCreators = {
  counterIncremented,
}

//위의 모든 것을 담은 store를 만든다.
const store = createStore(reducer)

export default store

기본적으로는 이렇지만,
이렇게 스토어를 만들면 Action을 만들때 마다 코드가 큼직하게 늘어난다.
(액션에 타입 만들고, 타입이랑 페이로드 넣어주고,
reducer에도 명시해주고, actionCreators 한줄 늘어나고...)
그리고 액션의 타입을 변수화 해주다보니 말이 길어진다.
(ActionTypes.Counter_Incremented)

store가 길어지고 가독성이 떨어지는 문제는
스토어의 내용을 feature 별로 잘라서 Slice로 만든 후 store에 붙이거나,
혹은 차차 하게 될 redux toolkit을 만나면 코드를 획기적으로 줄여 해결할 수 있다.

p.s redux 공식문서는 toolkit을 예시로 많이 들어놔서 
초심자에게는 처음부터 이해하기는 어려운 것 같다ㅠㅠ
노마드코더의 [초보자를 위한 리덕스 101] 추천...👍 
돈 안받았어여.. 니꼬쌤 그저 빛✨ 
다른 좋은 강의가 있다면 추천해주심 감사하겠습니다 (꾸벅)