Redux

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

위 사이트가 설명이 잘 나와있어서 두고두고 참고해야겠다.

 

BoilerPlate Korean.html

1.66MB

 

위 파일의 27페이지 리덕스 관련 dependency들을 다운 받아주자.

 

redux-promise, redux-thunk 이 미들웨어는 간단히 얘기하자면 리덕스를 잘 쓸 수 있도록 도와주는 역할이다.

리덕스는 리덕스 스토어안에 모든 state을 관리하게 된다. 이 store의 state을 변경하기 위해서는 딱 한 가지 방법인 dispatch를 이용해서 action으로 store안에 있는 state을 변경시킬 수 있다. 여기서 action은 plain object 객체의 형식으로만 받을 수 있다. 

 

근데 store에서는 언제나 객체의 형식으로만 받는 것이 아니다. 어쩔 때는 promise 형식으로 받을 때도 있고, function 형태로 받을 때도 있다. 당연히 redux store는 promise나 function 형태로 오면 받질 못한다. 이때 사용하는 것이 redux-promise와 redux-thunk다.

 

*redux-thunk*

function 형태로 왔을 때 어떻게 function 형태로 받는지를 dispatch에게 알려준다.

*redux-promise*

promise 형태로 왔을 때 어떻게 promise 형태로 받는지를 dispatch에게 알려준다.

 

위와 같은 이유로 두 미들웨어 없이 리덕스를 사용하게되면 에러가 많이 날 수도 있다.

 

다운받은 리덕스를 어플리케이션에 적용해주자.

index.js

 

다음으로 createStoreWithMiddleware() 이 부분의 괄호 안에 reducer을 넣어줘야한다.

아직 _reducers 폴더만 만들었지 아무것도 만들지 않았기에 _reducers 폴더 안에 index.js 파일을 만들어주자.

 

_reducers/index.js

*combineReducers가 하는 역할*

store 안에 여러가지 reducer들이 존재할 수 있다. 그 이유는 리듀서 안에서 하는 일이 어떻게 state가 변화하는지를 보여준 다음에 변한 마지막 값을 리턴해주는 것이 리듀서이다. 이때 state이 user에 관한 state이 존재할 수도 있고, commet에 관한 state가 존재할 수 있다.

이렇게 여러가지  state가 존재할 수 있기 때문에 이 reducer들이 나누어져 있다. 이것을 redux에서 갖고온 combineReducer을 이용해서 rootReducer에서 하나로 합쳐주는 것이다.

 

위 코드를 보면 user만 들어가 있지만, 나중에 state가 많아짐에 따라 comment, subscribe, etc.. 가 들어갈 수 있다. 

 

일단 user_reducers 폴더 안에 user_reducer.js 파일을 만들어주자. 이것은 나중에 user에 관한 state를 관리해줄 것이다. 

 

 

그리고 createStoreWithMiddleware에 리듀서와 크롬 익스텐션을 넣어주자. 

 

_reducers/index.js