Redux : A predictable state container for JavaScript apps.
가장 중요한 리덕스의 특징 : Single Soure of Truth.
하나의 상태(객체)를 갖는다.
state = {}. 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 우겨 넣는다. —> 애플리케이션의 복잡성을 한껏 낮춘다.
한 곳에 데이터를 중앙집중적으로 관리하면 여러 곳에 흩어져있는것보다 데이터를 관리하기 쉽다.
1. 하나의 state를 유지하는걸 통해서 애플리케이션의 복잡성을 낮춘다.
2. 이 state는 너무나도 중요하기 때문에 외부로부터 철저히 차단시켜 데이터를 수정하는 것을 차단시킨다.
데이터를 읽고 쓰는 방법 : ‘인가된 담당자’(함수)를 통해서 할 수 있다.
데이터를 쓰고싶으면 : 직접 쓰지 못하고 dispatcher, reducer를 통해 데이터를 수정할 수 있다.
직접 state를 바꾸지 못한다.
데이터를 가져갈때 : getState라고하는 함수를 통해서만 데이터를 가져갈 수 있다.
1> 리덕스의 핵심 : store
정보가 저장되는 곳. 정보가 모두 store라는 곳에 저장된다.
2> state
store안에 state라고 하는 실제 정보가 저장된다. 중요한 건, 절대로 state에 직접 접속하는건 불가능하고 금지되어있다.
항상 누군가를 통해사면 해야한다.
3> reducer 함수
store를 만들 때, 제일 먼저 해야할 것 : store를 만들면서 reducer라는 함수를 만들어서 공급해야한다.
Redux.createStore를 하게되면 store가생성된다. 그 store를 생성할 때, 꼭 줘야하는 인자가 reducer.
reducer는 함수.
function reducer(oldState, action){ .. } //oldState : 기본의 state, action: 새로운 정보 var store = Redux.createStore(reducer);// store 생성
4> render
store안에 없다. Redux와는 상관없이 내가 작성한 코드. UI를 만들어주는 역할을 하는, 우리가 짤 코드.
2.3. 리덕스 여행의 지도 : action과 reducer
reducer를 통해 state값을 참조해서 UI를 만든다.
store.dispatch에게 객체를 하나 전송한다. 그 객체는 action. 즉, action이 dispatch에게 전달된다.
dispatch가 하는 역할
1) reducer를 호출해서 state값을 바꾼다.
2) dispatch가 reducer를 호출할 때, 2개의 값을 전달한다. 첫번째 : 현재의 state값 + 두번째 : action데이터(객체)
function reducer(state, action){ if(action.type === 'create'){ .... return Object.assign({}, state, { contents:newContents, maxId:newMaxId }) } } parameter가 현재 state, dispatch로 보낸 action객체, 이렇게 2개.
reducer함수의 return값 : state의 새로운 값이 된다.
기존의 state값을 복제하고, 그 복사본을 변경한 다음에 리턴하는 것. (immutablility)
객체를 복제할 때 : Object.assign({}, ) : 첫번째 인자를 반드시 ‘빈 객체’로 줘야한다. Object.assign()의 리턴값은 첫 번째 인자인 객체이기 때문.
그러면 두번째 인자의 것을 첫번째에 복사를 해준다.
첫번째 인자에 두번째 인자를 복사하고, 그 값에 또 세번째 인자를 복사한다.
ex: Object.assign({}, {name: ‘egoing’}, {city: ‘Seoul’}) ;// {name: ‘egoing’, city: ‘Seoul’}
즉, reducer: state를 입력값으로 받고, action을 참조해서 새로운 state값을 만들어 리턴해주는, state를 가공해주는 ‘가공자’이다.
action값과 이전의 state값을 이용해서 store의 state값을 변경해준다. 그 리턴된 값이 새로운 state값이 된다. 그 리턴의 값은 원본을 바꾸는 것이 아니라 이전의 state의값을 복제한 값을 리턴해야지만 리덕스를 사용하는 여러가지 기능을 활용할 수 있다.
state가 변경되면 다시 render 호출.
dispatch : store.dispatch({type:”CHANGE_COLOR”, color:’red’})