Redux

2018. 12. 11. 16:29javascript/redux

Redux


Redux는 글로벌 하게 state를 관리하기 위해 만들어진 라이브러리 입니다. 간단한 리액트 프로젝트에서 사용하기에는 불필요할 수 있지만 규모가 커진 프로젝트에는 그만큼 리액트를 효율적이게 사용할 수 있게 도와줍니다. 


리덕스 없이 평소에는 스테이트의 값을 전달해주기 위해 props로 계속해서 전달해주고 전달해주는 부모 컴포넌트에서 부터 자식 컴포넌트로 계속해서 전달해주는 방법을 써야합니다. 


아래 gif를 보면 이해가 갈것입니다. 


WithOutRedux



리덕스가 없을 때는 다른 컴포넌트의 스테이트의 변화를 거쳐서 거쳐서 전달을 해주고 있습니다. 

하지만 리덕스와 함께라면 


WithRedux

하나의 스테이트의 변화에 하나하나 거치지 않고 다른 컴포넌트에게 변화 된값을 전달해줄 수 있습니다. 



출처) https://academy.nomadcoders.co/courses/216871/lectures/3368679 


보통 리덕스의 구조는 아래와 같은 방식으로 이루어 져 있습니다. 


Redux Ducks 사용하여 만들어보기 


  1. 필요한 것들을 불러오기
  2. 액션을 정의
  3. 액션 크리에이터 정의
  4. 리듀서 정의
  5. 리듀서 함수 만들기
  6. Export action Created
  7. Export reducer


다음 글에는 위의 구조에 맞추어서 코드를 작성해보겠습니다.