[디자인패턴] Flux 패턴

 Component들을 조합하면서 생긴 문제점 
: 데이터를 표시하기 위해서 상위 컴포넌트에서 하위컴포넌트까지 Props를 일일히 내려줘야 함 
- 즉, 데이터가 필요한 지점까지 props를 넘겨줘야 하기 때문에 해당 데이터를 쓰지 않는 중간 컴포넌트에도 props를 일일히 넣어야 했음
- Props가 많아질수록 Model 이 계속 여기저기 누덕누덕 들어가는 것처럼 됨 

위 구조의 문제를 해결하기위해 Flux패턴 이 나옴 

Flux 패턴이란? 

출처 : https://facebookarchive.github.io/flux/docs/in-depth-overview

- props로 Model이 분할되는 형태에서 Flux는 Store에서 상태를 관리하는 방식으로 변경됨
- View에서 action을 통해 데이터를 호출하면 dispatcher가 store에 데이터를 불러와 두고 그 값을 View에서 표시함
- Store라는 독립적인 상태 관리를 두어 비즈니스 로직과 뷰에서 데이터를 분리함

- 위 Flux패턴을 이용한 Redux, Vuex와 같은 상태관리 라이브러리가 나오면서 구체화 됨 

   단점: 할 일이 많아지고(코드 양이 좀 있다), 러닝커브가 좀 높은편이다.                         
   장점: 대형 프로젝트에서는 이만한 상태 관리 패턴이 없는 것 같아서 개인적으론 극호... 

<<Redux 대략적인 예시>>
redux devtools : https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko&pli=1

function reducer(oldState, action){ //reducer를 통해 state를 변경함
 if(action.type === 'create'){
	let newContent = OldState.content.concat();
    let newMaxId = OldState.maxId + 1;
    newContent.push({id:newMaxId, title:action.payload});
    
    return Object.assign({}, {
    	content: newContent,
        maxId: newMaxId,
        mode: 'read',
        selectedId: newMaxId
        });
 }
}


let store = Redux.createStore(reducer); //스토어를 생성할때 reducer를 넘겨줘야 함


function render(){ //UI 그릴거다 값가져와라!
 let state = store.getState(); //getState()를 통해 store에서 값을 가져옴
 
 document.querySelector('#app').innerHTML = `
   <h1>logo</h1>
	...
   `; // 가져온 값을 통해 UI를 그림
}

store.subscribe(render); //state가 변경될때마다 render함수가 호출되어서 변경된 값을 알아서 UI에 반영해 줌



========
<form onsubmit="store.dispatch({type:'create', payload:{title:title, desc:desc}}); " />
//dispatch가 하는일
//1. reducer를 호출해서 state를 바꿔줌(dispatch는 reducer에게 기존state와 action객체를 인자로 보냄)
//2. 그 다음 subscribe를 호출해서 render()를 호출해서 UI갱신

 

참고 :
https://facebookarchive.github.io/flux/docs/in-depth-overview   
https://haruair.github.io/flux/docs/overview.html

https://ko.redux.js.org/introduction/core-concepts

https://v3.vuex.vuejs.org/kr/

https://opentutorials.org/course/4901

https://kyounghwan01.github.io/blog/React/redux/redux-basic/#typescript-redux-toolkit