:JavaCript app을 위한 예측가능한 state contatiner이다. (리엑트만을 위한 libarary는 아니다)
states는 컴포넌트 안에서 관리를 하고 그 스테이트는 앱에서 필요한 상태를 나타내는 공간이다.
리엑트로 프로젝트를 진행하게 되면 컴포넌트는 local state를 가지게 되고 어플리케이션을 global state를 가지게 된다. 리엑트에서는 local state를 상위 컴포넌트에 전달해 형제 컴포넌트에 전달할수 있다. 하지만 자식 컴포넌트가 많아지면 매우 복잡해진다. 또 Global state의 유지가 어렵다. componenet에 prorps를 계속해서 전달해야하는데 상단의 diagram보다 훨씬 복잡한 절차를 거치게 된다. 하지만 Redux에서 store를 통해 모든 state를 저장 유지할수있고 원하는 컴포넌트로만 data전달할 수 있게 되어 이러한 문제가 해결된다. Redux는 Flux패턴을 좀더 쉽고 정돈된 형태로 쓸 수 있게 도와주는 라이브러리라고 할 수 있다.
:Flux는 facebook에서 만든 client-side web application을 구축할 떄 사용하는 application. architecture,disign paatern이다. 너무 복잡해진 MVC구조의 단점을 보완하기는 단방향 데이터흐름의 구조이다.Redux는 이러한 모델의 구현체라고 할 수 있다.
1.Single source of truth
:동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉 데이터를 저장하는 store라는 하나뿐인 공간이있다.
2.State is read-only
:state는 setstate를 사용해야 변경이 가능했다. redux는 action이라는 객체로 변경할수 있다
3.Changes are made with pure functions
:reducer랑 연결되는 개념
:상태가 관리되는 오직 하나의 공간. 앱에서 필요한 데이터를 한 공간에 두고 store에 접근해서 state 정보를 가져올수 있다.
예시)
import { createStore } from 'redux';
import todoApp from './reducers';
let store = createStore(todoApp);
Simple javascript object 이다. 이 객체안에 다양한 데이터를 담긴다. store에게 운반하는 역할하게 된다. action을 호출하면 어플리케이션의 state를 변경하여 준다. type는 일반적으로 문자열 상수로 정의된다. 정의된 action type은 action creators를 통해 사용한다.
예시)
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
현재 상태와 action을 이용해 상태를 만들어 낸다.aciton을 통해 어떠한 행동을 정의했다면 그 결과 상태가 어떻게 바뀌는지 특정하게되는 함수이다.
action dispatch ->reducer ->new state
(action객체가 dispatch 메소드에 전달 되고 dispatch가 reducer를 호출해서 새로운 state를 생성)
예시)
UI에서 +라는 버튼을 누르면 dispatch의 전달인자로 action 객체를 담아서 reducer로 전달됨.
reducer action 객체의 타입에 따라서 다른 동작을 수행한다 그 수행 결과로 새로운 state를 반환한다.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
});
default:
return state
}
}
1,map state props
2.hooks ->좀더 최근에 나왔고 직관적
1.상태를 예측 가능하게 만들어 준다.
2.유지보수
3.디버깅에 유리하다(action과 state log 기록시)
4.테스트를 붙이기 쉽다.