react-redux

redux공식 사이트

https://redux.js.org/introduction/getting-started/

Getting Started with Redux | Redux

 

 

 

Rdux를 쓰는 이유

1. props를 전달, 전달, 전달해야 하는 문제를 해결 할 수 있다.

react앱을 작성하다보면 props를 전달, 전달, 전달해야 하는 경우가 생긴다.

리덕스를 사용하면 이 문제를 해결할 수 있다.

A -> B -> C로 전달하던 값을 A -> C로 한번에 전달 가능한 것이다.

 

2. 코드가 강하게 coupling되어있는 경우 decoupling 할 수 있다.

생활코딩 참조 https://opentutorials.org/module/4078/24938

Redux를 이용해서 애플리케이션 만들기 - Redux

 

 

redux사용 개념

redux에는 store라는 일종의 저장소가 있다. 여기에 모든 state를 넣고 관리한다.

dispatch를 작성하고 action을 작성한 후 dispatch(action)을 통해서 state값을 변경할 수 있다.

state는 getState를 사용하여 가져올 수 있다.

 

redux-dev-tools

redux dev tools는 상태관리를 할 수 있는 툴이다.

redux-dev-tools를 install하고 inspect에 들어가보면 툴이 보이게 되는데

state가 변할때마다 기록이 된다.

time travel기능을 통해 이전상태로 돌아갈 수 있고, 현재 상태 정보를 로컬에 저장할 수 있다. 또 로컬에 저장된 상태를 업로드할 수도 있다.

 

이 기능을 사용할 때 Immutable이라는 개념이 등장한다.

 

state값을 변경할 때 값 자체를 변경하면 안된다( 이렇게 하면 time travel기능을 쓸 수 없다)

state값을 복사하여 변경한 후 return해줘야 한다.

if(actionType === "CHANGE_COLOR"){
	newState = Object.assign({}, state, {color : action.color});
}

Object.assign

- { } 에 state복사

- 그 결과에 {color : action.color} 복사

- 첫번째 인자가 return

 => state에서 color만 바뀐 결과가 return됨

 

state도 남아있고, 새 상태인 newState도 생성됨 => Immutable하게 만든것

 

생활코딩 참고 https://opentutorials.org/module/4078/24939

Redux 선물 - 시간여행 디버깅 - Redux