Redux 맛보기

추상적설명

도구 : 상태관리 , 어플리케이션의 복잡성을 낮춘다.

특징 : 하나의 상태를 갖는다 ( 상태란 객체 )

state = {}

reducer 를 통해 데이터를 수정한다 ?

getState란 것을 통해 데이터를 수정한다 ?

데이터를 외부에서 직접적으로 제어할 수 없도록 !! ⇒ 외부에서 데이터 변경 사전차단 !!

⇒ 예측 가능함

부품들을 작업을 할때 딱 그 부품에만 신경을 쓰면 된다. ⇒ 정신적 에너지 소비를 낮추는 장점!

---

❓ 내가 생각한 개념

Store라는 저장공간? 행동동작들이 진행되는 공간이 있으며

그안에는

1. 데이터의 상태를 나타내는 state가 있다
2. reducer는 상태를 업데이트 해주고 state한테 그것을 알린다
3. reducer한테 알려주기 위해서는 dispatch라는 행위를 통해
   구독 , action이라는 행동으로 나뉘는데 ㄴ
4. action은 웹 브라우저에서 변화된것을 처음으로 인식한다.
5. getState라는 것은 화면에 렌더링될 데이터들의 상태를 준다 ? 받는다 ?

---

✅  팩트 체크

store는 저장공간이 맞다 그리고 state에 저장된다

( state에는 절대 접근 할 수 없으면 간접적으로 변형을 해야한다 )

reduecr는 함수이다 ! ⇒ state를 변경해주는 역할

기본구조

function reducer(oldState, action) { … }

var store = Redux.createStore(reducer);

• render는 스토어 밖에 존재하며 redux랑은 관계가 없다. , UI를 건드는 개발자가 짜는 부분 ## state의 데이터를 나타내주는 함수
• store에 state에 직접 접근할수없기 떄문에 , 앞단에 세가지 함수들이 존재한다 ( 접근하기 위한 ) ( dispatch, getState, )
• 구독이라는 것은 state가 변경될떄 렌더함수가 알아서 업데이트 되어 ui가 변경
• dispatch: reducer를 호출해서 state값을 변경 , subscir을 호출해서 render함수를 통해 화면에 표기

---

action reducer 새로운 state값 ⇒ 렌더가 다시 호출 dispatch의 subscribe를통해서 render가 호출

Redux가 필요한 이유 ?

어플리케이션에서 여러가지 아이템들이 서로 상호작용을 하기 위한 로직을 짤때

아이템의 갯수가 많아 지면 많아질수록 추가해야할 코드가 기하급수적으로 많아 지는 이유가 발생한다. 다음과 같은 예시이다

click시 모든 아이템의 배경이 바뀌는 상황
querySelector('').style.backgroundColor:'red';

Redux.js.org 공식홈페이지

사용하기

1. store를 생성한다.
   reduecr는 상태를 변경해주는 역할 (기존의 state값, action )

function reducer(state, action){
		if(state === undefined) {
			return { color : 'yellow' } //초기 스테이트 값
		}
// return { color : 'red' } 변경될값 
		if(action.type ==='CHAGNE_COLOR'){
				newState = Object.assign({}, state, { color:action.color} )
		}
		return newState;
}
var store = Redux.createStore(reducer); // store전역변수

store.getState(); // state의 값을 가져오고 싶다
var state = store.getState();

1. state를 변경하고 싶다.
   1. action 이라는것을 만든다
   2. 만든 action값을 dispatch한테 전달한다
   3. dispatch가 reducer를 호출해서 이전의 스테이트값과 액션을 값을 동시에 준다
   4. reduecr함수가 변경된 스테이트를 최종적으로 반영한다?

store.dispatch({ type:'CHANGE_COLOR', color:'red' }); // store의 state를 red로 바뀌게 하고 싶다.

store.subscribe(red) // state값이 변경될 떄 마다 red함수가 호출

Redux 결론

리덕가 없는 코드는 각각의 컴포넌트간의 의존성이 너무 높다

redux는 action을 통해서 변경된 값을 dispatch한테 전해주면

그렇게 되면 state의 값이 변경 될 때 store안에 있는 subscribe안에 함수를 전달해줘서 state 변경될때마다 통보를 받기 때문에 다른 컴포넌트에 영향이 가지 않음. 즉, 수정해도 다른 부품들은 영향을 받지 않는다는것.

독립성을 보장받을 수 있다.