리덕스란?

벨로퍼트 블로그를 참고하여 작성한 글 입니다. https://velopert.com/3528

리덕스는 리액트 상태관리를 쉽게 도와주는 라이브러리 입니다 ~~

리덕스가 없었다면 우리는 props로 데이터를 내려주기 위해 자식을 거쳐거쳐 복잡하게 내려가야만 하죠!!
이렇게 말이에요 !!

리덕스는 스토어라는 상태 창고를 가지고 있고 우리는 이 스토어를 구독하고 필요할때마다 상태값들을 꺼내서 쓸 수 있습니다!!

컴포넌트에 어떤 이벤트가 생겨서, 상태가 변화해야할 때, 리덕스는 dispatch라는 함수를 통하여 해당하는 상태의 액션을 스토어에 넘겨줍니다. 여기서 액션은 타입속성을 가진 객체로 상태 변화를 일으킬 때 참조할 수 있는 객체를 말합니다.

예를 들어, { type: 'INCREMENT', diff: 2 } 라는 액션 객체는 상태에 2만큼 값을 더하라는 의미입니다.

또 하나 중요한 개념이 리듀서 라는것이 있는데, 리듀서는 업데이트 로직을 정의하는 함수를 말합니다.
스토어에 액션 객체를 받으면 해당하는 액션의 타입에 따라 상태를 어떻게 업데이트 해야 할지 정의를 해주어야 하는데 이 역할을 수행하는 것이 리듀서 입니다.

아까 말했던 { type: 'INCREMNET', diff: 2 } 라는 액션이 들어오면 숫자를 감소시키는 작업은 여기서 담당하게 됩니다.
그리고 리듀서는 1.state: 현재상태, 2.action: 액션객체 이 두가지 파라미터를 참조하여 새로운 상태 객체를 만들고 이것을 반환합니다.

리듀서 : 액션 => 스토어 전에 반드시 거쳐야 합니다

리듀서를 통해서 스토어가 변경되고
발행된 액션을 관리하는 것은 리듀서 입니다

예를들어
삭제 액션 발행하면
리듀서 : 삭제한데? 알았어 => 스토어에 넘겨줄게
리듀서에서 로직을 찾아서 리턴을 스토어한테 전달해줍니다.

이러한 객체를 내보내는게 액션생성 함수이고 이것이 발행되는 곳이 디스패치 입니다

이 액션을 디스패치 메서드에 넣어서 호출하고
액션은 디스패치의 인자로 액션 객체를 리듀서를 통해 전달하게 됩니다.

리듀서에서 그 타입을 판별하고 해당되는 리턴을 내보내고 그 타입에 따라서 스토어가 업데이트 됩니다.
디스팻치 는 useDispatch로 가져옵니다.