본문 바로가기
JavaScript/JavaScript with Error

[해결 방법] TypeError: Cannot read properties of undefined (reading 'counter')

by HJ0216 2023. 6. 4.

🟨 기본 환경: IDE: VS code, Language: JavaScript

 

 

발생 Error

JavaScript에서 다음 Source Code를 실행할 경우,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const redux = require('redux');
 
const counterReducer = (state, action) => {
    return {
        counter: state.counter + 1
    };
};
 
const store = redux.createStore(counterReducer);
 
const counterSubscriber = () => {
    const latestState = store.getState();
    console.log(latestState);
};
 
store.subscribe(counterSubscriber); // 데이터 변경 시 실행
 
 
 

🚨 다음과 같은 Error 발생

counter: state.counter + 1
TypeError: Cannot read properties of undefined (reading 'counter')

 

 

발생 원인

createStore() → counterReducer 호출 → 새로운 state return

기존의 state가 정의되어있지 않아서 TypeError 발생

 

 

해결 방법

기존 state의 기본값 부여

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const redux = require('redux');
 
const counterReducer = (state = {counter: 0}, action) => {
    return {
        counter: state.counter + 1
    };
};
 
const store = redux.createStore(counterReducer);
 
const counterSubscriber = () => {
    const latestState = store.getState();
    console.log(latestState);
};
 
store.subscribe(counterSubscriber); // 데이터 변경 시 실행