리덕스는 왜 필요할까? Why do we need Redux?

리덕스가 필요한 이유는?

Why do we need it?

Components have local state, but apps have global state.

컴포넌트는 local state를 갖고 있고, 앱은 global state를 가지고 있기 때문이다.

We need to save the shared state somewhere.

state는 공유되어야 한다.

유저가 로그인 했는지 안했는지 여부를 모든 컴포넌트들이 알기를 원하기 때문.

따라서 해당 정보를 많은 컴포넌트에서 공유하고 싶다.

예를 들어, 좋아요 컴포넌트는 이를 댓글 혹은 네비게이션 컴포넌트에게 정보를 전달할 필요는 없다.

하지만 글로벌에서 유저가 로그인을 했는지는 안했는지 여부는 알아야한다.

이렇게 공유된 state를 저장하는 방법이 리덕스다.

global shared state를 저장하는 것.

Redux= state container

리넉스는 해당컴포넌트의 정보를 부모 컨테이너에서 물려받는 것이 아니라 

해당 컴포넌트의 state를 저장한 정보를 가져올수 있게 해준다.

이 경우, 블로그 컨테이너는 포스트 정보를 가져오고, 댓글 컴포넌는 로그인 유저 정보를 가져온다.

 

 이 전에는 댓글, 포스트 컴포넌트는 부모인 블로그 컨테이너에서 props를 물려받았다.

그러나 이제 리덕스에서 필요 정보를 가져오면 된다. 덕분에 필요없는 props들 (flying props)도 없어진다.

리덕스를 갖는 것은 state의 DB를 갖는 것과 비슷하겠죠??

따라서 우리 컴포넌트는 서로에게 props를 줄 필요가 없고, 리덕스 state database에서 가져오면 된다.

Redux is a global state container.

포스트에서는 포스트 리스트를 가져오고, 네비게이션에서는 유저명을 가져오고

네비게이션에서는 포스트를 가져올 필요도 없고, 블로그 컨테이너가 유저 정보를 가져올 필요도 없다.

The Redux Store is like a box.

We go and grab what we need for the container.

For example, from <Navigation /> we only grab the username.

The whole state of your app is stored in an object(store).

앱의 모든 state를 object로 저장된다. 자바스크립트 object, 이는 'store'라 불른다.

If you want to change the data inside of this object you need to 'dispatch'(send) an action.

You will send this actions to a reducer and this reducer will change the object for you.

컴포넌트의 state가 굉장히 복잡하고 커질 수 있기 때문에 리덕스는 해당 오브젝트를 수정하는것이 매우 엄격하다.

오브젝트의 데이터를 수정하는 방법은 '액션'을 'reducer'로 보내면 가능하다.

'reducer'는 액션들을 받는다. 'reducer'가 오브젝트를 변경한다. 즉, 액션이 있고, 데이터의 모양이 있다.

해당 데이터를 변경하려면 직접적으로는 불가능하다. action를 'reducer'에게 전달하면 'reducer'가 이를 변경해준다.

액션을 받는 사람은 'reducer'이고 이는 'action'을 살펴본 후에, 데이터를 변경해준다. 말로 설명하면 어렵지만

아래 그림을 보면 이해하기 쉬우실 겁니다.