[ 스파르타 / TIL ] 내일배움캠프 #31

오늘 한 것

---

• 알고리즘 문제 풀기
• 리액트 강의 보기

 

 

오늘의 배움

---

리덕스 시작하는 방법

---

npm init -y
npm install redux

 

 

import redux 

---

const redux = requier(‘redux’);

 

store 만들기

---

데이터를 관리해준다. 관리하는 데이터는 리듀서 함수에 의해 결정된다. 리듀서 함수가 새로운 상태 스냅샷을 생성하기 때문이다. 리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어낸다. 위의 코드를 실행하면 초기 상태를 출력해낸다. 

const store = redux.createStore();

 

 

 

 

리듀서 함수

---

state(현재 상태)와 action을 기본값으로 받는다. 리덕스는 궁극적으로 리덕스 라이브러리에 의해 실행된다. 그리고 새로운 상태를 return 한다. 기존의 상태를 대체한다.

 

아래의 counter가 0으로 설정된 객체를 항상 리턴한다. 

const counterReducer = (state, action) => {
	return {
    	counter: 0;
    }
};

 

 

하지만 counter에 1을 더하면 기존에 있는 숫자에서 계속 더해져야하기 때문에 아래와 같이 써준다.

 

const redux = requier(‘redux’);
const counterReducer = (state, action) => {
	return {
    	counter: state.counter + 1;
    }
};

const store = redux.createStore(counterReducer);

 

counterReducer(리듀서)를 store에 넣어주는 이유는 어떤 리듀서가 그 저장소를 변경하는지 저장소가 알아야 하기 때문이다. 저장소와 작업하는건 리듀서이다. 그래서 저장소는 데이터를 조작하는 리듀서 함수가 어떤 함수인지 알아야한다. 

지금까지 리듀서 함수와 저장소를 만들었다.  이제 그 저장소를 구독하고 발송할 수 있는 액션이 필요하다. 

 

// 구독자 함수
const counterSubscriber = () => {
	const latestState = store.getState()
};

어떠한 파라미터도 받지 않는다. 저장소의 getState()를 호출할 수 있다. getState()는 createStore()로 생성된 저장소에서 사용할 수 있는 메소드이다. 업데이트된 후에 최신 상태 스냅샷을 제공한다. 그래서 구독 함수는 상태가 변경될 때마다 실행된다. 그럴때 getState()메소드로 변경된 후의 최신 상태를 받을 수 있다. 

 

마지막으로 리덕스가 이 구독 함수를 인식하도록 하고 상태가 변경될 때마다 이 함수를 실행하라고 말해줘야한다. 

// 구독자 함수
const counterSubscriber = () => {
	const latestState = store.getState()
};

store.subscribe(counterSubscriber);

 

파일 실행

---

node 파일이름.js

 

 

에러 메시지

---

cannot read property of 'counter' of undefiend

 

 

아래와 같이 state에 초기값을 설정해줘야한다.

const redux = requier(‘redux’);
const counterReducer = (state = {counter: 0}, action) => {
	return {
    	counter: state.counter + 1;
    }
};

const store = redux.createStore(counterReducer);

 

store.dispatch({ type: 'increment'});

 

액션을 발송하는 메소드이다. 액션은 자바스크립트 객체이므로 식별자 역할을 하는 타입 프로퍼티를 가진 자바스크립트 객체이다. type 안에는 발송되는 모든 고유한 액션들이 리듀서에서 다른 것들을 유발하게 된다.