[JS] Redux?

[Redux 가 어떻게 나온거지?]

Redux가 어떻게 나오게 되었을까?

Redux는 React에서만 써야 하는 도구는 아니다. 하지만 리액트와 잘어울린다.

Redux는 data-state와 UI-state를 관리해주는 상태관리 도구이다.

React는 parent-child로 UI를 구성하고, 데이터 흐름도 부모에서 자식으로 단방향이다.

child 가 parent를 변경하려면, parent로 부터 callback을 주입받아야 한다.

바로 밑에 자식이면 상관 없지만, 깊은 하위 자식이라면 그 자식까지 전달해줘야 하므로

중간에 필요없는 컴포넌트까지 props를 공유하게 된다.

parent-child 관계로만 어려울때, 글로벌 이벤트를 통해서 관리하는 방법인 flux 패턴을 사용한다.

flux 패턴에서는 action, dispatcher, store, view 4가지로 구성했다.

1. (GlobalState)Store를 통해서 View를 그리고 (View가 Store를 subscribe한다. 또한 ReadOnly이다.)

2. Store에 변경을 주기위해서는, Action을 호출해야한다. 

3. Action이 발생하면 Dispatcher를 통해서 Store가 변경된다.

4. 이때 Dispatcher는 각각의 Reducer로 Action이 들어와서 새로운 State가 Store에 저장된다.

Redux에서는 상태를 immutable하게 새롭게 생성하여 저장한다.(사이드 이팩트가 발생하지 않도록, thread-safe 하도록)

React에서는 추가적으로 shouldComponentUpdate 메소드를 통해서 렌더링 할지 말지 결정하는데, 

(그때 새로운 상태이면 객체 Reference 차원에서 비교가 가능하므로 Immutable 한 객체를 생성하면 성능에 도움이된다.)

그렇기 위해서 새로운 상태를 만드는 Reducer는 PureFunction으로 정의되어야 한다.

(Reducer의 Immutable을 보장하기 위해 ImmutableJS를 사용한다.)

[React X Redux]

React에서 Redux를 어떻게 사용할까?

React에서는 Redux를 사용할때 두가지 종류의 컴포넌트를 정의하고 사용한다.

Redux와 연관되지 않는 Presentational 컴포넌트, Redux와 연관되는 Cotainer 컴포넌트로 나뉜다.

쉽게 말해서, Cotainer 컴포넌트는 GlobalStateStore와 연결된 컴포넌트이다.

고유의 상태를 가지며, 동적으로 변경해서 사용하는 컴포넌트를 정의할때 사용한다.

(주의: Cotainer 컴포넌트안에 Container 컴포넌트를 정의할 수 없다!)

Cotainer 컴포넌트는 GlobalStateStore를 구독해야 한다. 이때 사용하는 것이 <Provider> 이다.

<Provider>로 <App>을 감싸게 되면 모든 Cotainer가 Store를 사용할 수 있도록 해준다.

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

const store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

container 컴포넌트는 presentational 컴포넌트로 만든다.

이때 필요한 것들이 connect, mapStateToProps, mapDispatchToProps, presentational 컴포넌트다.

connect(mapStateToProps, mapDispatchToProps)(presentationComponent);

mapStateToProps(state, ownProps)는 변경된 globalStateStore 값을 받아서 어떤 props를 변경할지에 대해 정해주는 곳이고,

mapDispatchToProps(dispatch, ownProps)는 containerComponent에서 어떤 action을 dispatch 하도록 해줄 것인지 정의하는 곳이다.

둘다 Container에 props로 내려간다.

[Action]

- redux-actions > createAction & payload

- prefix

[Reducer]

- redux-actions > handleActions

- initialState

- combineReducers

[store]

- createStore(reducers, initState)

- store.getState()

- store.subscriber(listener)

[사진출처 / 내용참고] 

Redux: https://velopert.com/1225

Redux-Actions: https://velopert.com/3358

https://deminoth.github.io/redux/basics/UsageWithReact.html

https://deminoth.github.io/redux/basics/Actions.html

https://deminoth.github.io/redux/basics/Reducers.html

https://deminoth.github.io/redux/basics/Store.html