리덕스는 상태를 변경하는 도중 부수효과가 일어나지 않도록 코딩하기를 요구..
리듀서? "부수효과없이" 상태를 변경하는 함수.
액션 ? 변경될 상태 "정보"를 담은 js"객체"...
** 리듀서에는 부수효과가 존재할 수 없으니, 바깥에서 fetch 데이터를 호출한 뒤 그 값을 액션에 담아 리듀서 호출해야하는 번거로움..
Redux : 기본적으로 Javascript application들의 state(상태)를 관리하는 방법
- React와 많이 사용하면서 유명해졌으나, React에 의존하는 라이브러리는 아님.
- 이와는 별개로 Angular, Vue.js, Vanilla JS 등 JS 언어내의 여러곳에서 사용가능함.
** reducer 어원 ? 뭔가를 줄인다...
Redux를 왜 써야하는가 ?
-
props문법 귀찮을 때 씁니다!! : 모든 컴포넌트가 props 없이 state를 직접 꺼내쓸 수 있음(globally)....!!!!!!
useSelector()
** 컴포넌트 간 state문제를 해결하려고 사용!!!! -
페이지가 왔다갔다하며 데이터가 남아있어야 할 때(캐싱)...이것 또한 globally의 개념에 포함.
-
state 변경관리할 때 씁니다!! : 수정방법 reducer를 store에 정의해놓음으로써 상태관리 용이. 버그추적이 쉽다.. 범인은 reducer!!
(참고) 리액트에서는 state가 변경될 때마다 오브젝트를 다시 만들어줘야 한다. 왜냐면 pure component가 shallow comparison이니까...즉 ref만 비교하니까...
그러므로 오브젝트가 변경될 때마다 직접 새로운 오브젝트를 깊이있게 다 만들기 힘드니까...상태관리 라이브러리의 reducer에서 한번에 정의해 놓으면 편하다.
{createStore} from redux 의 주요함수 3가지(not react-redux)
!! dispatch를 통해 action을 reducer에 전달해서 상태를 변경한다 !!
- getState()
- dispatch(action)
- subscribe(cb) : state가 변할 때마다 cb가 자동호출됨.
React-Redux
1) mapStateToProps ? :Redux state로부터 state를 home component에 prop으로써 전달.
is used for selecting the part of the data from the store that the connected component needs. It is called every time the store state changes.
function mapStateToProps는 object를 리턴해야함.
2) mapDispatchToProps ? is used for dispatching actions(2nd arg in reducer) to the store. dispatch is a function of the Redux store. mapDispatchToProps is used for dispatching actions to the store
function mapDispatchToProps는 object를 리턴해야함.
Q.리듀서란? 어플리케이션의 state의 변화를 결정하는 함수.
action이라는 것을 전달 받아서 변화를 결정함.
** 리듀서가 리턴하는 것은 그 무엇이든 어플리케이션의 상태가 된다!!
(참고) Currying ? 여러인자를 받는 함수에 일부 인자를 넣어서 나머지 인자를 받을 수 있는 다른 함수를 만들어 낼 수 있는 함수형 프로그래밍 기법...
