TIL) 210607 Redux
Redux란?
공통된 부모에서 상태값을 관리하는 리액트의 디자인 패턴에서, 프로젝트의 규모가 커졌을때 발생하는 상태관리의 어려움을 해결하기 위해 고안된, 상태를 컴포넌트 바깥에서 관리하여 프로젝트 규모에 상관없이 상태파악을 쉽게 할 수 있고, 디버깅과 테스팅을 용이하게 만들어 주는 라이브러리이다.
Flux패턴
Dispatcher, Stores, Views로 구성된 디자인 패턴이며,
React와 같이 단방향 데이터 흐름을 따른다.
Redux의 구조
Action
{
type: "Todo", //필수항목
data: {
id: 0,
text: "something"
}
}
Action은 어떤방식으로 상태를 업데이트할지 정해주는 type이 명시된 객체 데이터를 reducer에게 전달해 준다.
Reducer
Reducer는 현재의 상태와, Action에서 넘겨받은 type에 따라 데이터를 가공해 상태를 업데이트해준다.
function reducer(state, action) {
if(action.type){
...
}
...
return changedState
}
*Reducer는 순수함수여야한다.
Dispatch
디스패치는 reducer에게 액션을 발생시키라고 전달하는 스토어의 내장함수이다.
dispatch(action)
Store
앱의 모든 상태를 보관하고, Reducer와 Dispatch와 같은 내장함수들을 포함하고 있다.
//store.js
export const store = createStore(rootReducer, applyMiddleware(...middlewares));
//index.js
<Provider store={store}>
<App />
</Provider>
Subscribe
스토어의 내장 함수 중 하나로 함수 형태의 값을 인자로 받으며,
액션이 디스패치 될 때 마다 전달해준 함수를 호출한다.
Author And Source
이 문제에 관하여(TIL) 210607 Redux), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hun1224/TIL-210606-Redux저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)