사용기 및 에러처리 기록

작업 상태

- redux 사용 방법을 테스트 하던중 발생했습니다.

에러 메시지 

Uncaught ReferenceError: initialState is not defined
    at counter (redux.html:43:26)
    at dispatch (redux.js:329:23)
    at createStore (redux.js:403:4)
    at redux.html:63:15 

const counter = (state = initialState, action) => {  //이곳에서 에러가 발생했습니다.

원인

자바스크립트에서 발생하는 에러입니다. initialState 라는 변수가 정의되지 않아서 발생합니다.

일반적으로 

initialState 변수가 정의되지 않은 경우 
initialState 변수가 다른 파일에서 정의된 경우, 해당 파일을 import하지 않은 경우
initialState 변수의 스코프(scope)가 함수 내부에 한정되어 있어, 함수 외부에서 접근할 수 없는 경우
발생합니다.

처리

분명히 정의했었는데 이상해서 살펴보니 다른 부분 작업하다가 지워졌습니다.

변수 추가후 특이 사항 없음.

참고

읽던페이지 : 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG

Redux
JavaScript 애플리케이션에서 상태 관리를 위한 도구입니다. React와 함께 많이 사용되며, React에서 컴포넌트 간에 상태를 공유하고 업데이트하기 위한 상태 관리 방법으로 Redux를 많이 사용합니다.

Redux 중요한 메소드

createStore(reducer, [preloadedState], [enhancer]): 
애플리케이션의 상태를 저장하고 업데이트하는 스토어를 생성합니다. reducer는 액션에 따라 상태를 업데이트하는 함수이며, preloadedState는 초기 상태값을 나타내며 선택적으로 전달될 수 있습니다. enhancer는 미들웨어와 같은 스토어의 기능을 확장하는 함수입니다.

combineReducers(reducers): 
다수의 리듀서를 하나로 합쳐줍니다. 이를 통해 하나의 애플리케이션 상태를 여러 개의 작은 리듀서로 나눌 수 있습니다.

dispatch(action): 
액션을 발생시킵니다. 액션은 객체 형태로 {type: 'ACTION_TYPE', payload: ...}와 같은 형태로 구성됩니다. 리듀서는 이 액션에 따라 상태를 업데이트합니다.

getState(): 
스토어에 저장된 현재 상태를 반환합니다.

subscribe(listener): 
스토어에 상태가 변경될 때마다 호출되는 콜백 함수를 등록합니다. 이를 통해 상태가 변경될 때마다 UI를 업데이트하거나, 상태 변경을 로그로 기록할 수 있습니다.

applyMiddleware(...middlewares): 
미들웨어를 등록합니다. 미들웨어는 액션을 디스패치하기 전 또는 후에 추가적인 동작을 수행할 수 있습니다. 
Redux Thunk와 같은 미들웨어를 사용하면 비동기 작업을 처리할 수 있습니다.