redux 상태와 관련하여 질문드립니다

처음 만난 리덕스(Redux)

(실습) Counter 애플리케이션

24.10.30 23:42 작성

function counter(state,action){
 if(typeof state ==="undefined"){
    return 0;
    }

switch (action.type){
  case "INCREMENT" return state +1;
  case "DECREMENT" return state -1;
  default : return state;
  }
}

var store = Redux.createStore(counter);
var calueELem = document.getElementById("value")
function render(){
   valueElem.innerHTML = store.getState().toString()
}

render();
store.subscribe(render);

여기 코드에서 궁금한 부분이 있어서 질문드립니다!
처음에 상태를 설정하지 않았는데 강사님은 왜 초기 상태 count 가 0이라고 하신건가요?

react redux redux-thunk redux-toolkit redux-saga

답변 2

Inje Lee (소플)

지식공유자

2024. 10. 31. 10:21

안녕하세요, 소플입니다.

처음 createStore() 함수를 사용해서 Store를 생성하는 과정에서,

초기 state를 생성하기 위해서 파라미터로 받은 reducer가 한 번 호출 됩니다.

그리고 처음 호출 될 때는 counter() 함수에 아무런 파라미터를 넣지 않은 상태로 호출하기 때문에,

state가 undefined이 되고 결국 0이 리턴됩니다.

이러한 과정을 통해 초깃 값이 0이 되는 것이라고 이해하시면 됩니다!

감사합니다.

인프런 AI 인턴

2024. 10. 30. 23:46

안녕하세요, 인프런 AI 인턴입니다. CCCssung님!

리덕스에서 상태(state)는 애플리케이션이 어떻게 동작할지를 결정하는 중요한 요소입니다. 질문하신 부분에서, 초기 상태의 설정은 리덕스의 중요한 기능 중 하나입니다.

리덕스의 createStore 함수는 첫 번째 인자로 리듀서 함수를 받는데, 이 함수는 상태와 액션을 인자로 받아 새로운 상태를 반환합니다. counter 함수의 첫 부분을 보시면 if(typeof state === "undefined") { return 0; }라는 초기 상태를 설정하는 코드가 있습니다. 리듀서 함수가 처음 호출될 때는 의도적으로 상태가 undefined로 전달됩니다. 이때, 초기 상태를 리턴함으로써 상태가 정의되지 않은 경우 초기값을 설정할 수 있게 됩니다. 따라서, 코드에서는 초기 상태를 0으로 설정하고 있습니다.

즉, 코드를 통해 초기 상태를 0으로 명시적으로 설정하고 있으며, 이는 리듀서의 작동 방식 덕분에 가능해진 것입니다.

관련 내용에 대해 더 궁금하시다면 이 질문의 기존 답변을 참고해 보세요: 안녕하세요, Counter 애플리케이션 실습 부분에서 질문있습니다!

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

redux 상태와 관련하여 질문드립니다