react-redux
- Provider
cf. redux order
1. event 발생 ->
2. action 생성함수로 action을 생성하여 store로 dispatch(처리요청) 함 ->
3. action을 받은 store는 reducer에게 action을 분석해서 실행하도록 지시함(수행/order) ->
4. 변경된 state는 연결된 component 값들을 변경하고 렌더링을 발생시킴
redux에서 subscribe
store의 state가 바뀌었을 때 어떤 component가 동작해야하는지를 지정하는 역할
redux에서 dispatch
이벤트가 발생했을 때, component에서 요청한 action을 생성하여 store에서 실행하도록 넘겨주는 역할
createStore
를 applyMiddleware
로 감싸면 미들웨어가 action을 중간에 다르게 처리해서, "비동기 액션"을 보낼 수 있도록 해준다.
미들웨어는 redux에 기본적으로 포함되어있지 않으며, 사용을 위해서는 redux-thunk나 redux-promise 등을 직접 설치해야
여기까지 내용은 redux middleware로 이동
React Redux는 React용 공식 Redux UI 바인딩 라이브러리
Redux와 React를 함께 사용하는 경우 React Redux를 사용하여 이 두 라이브러리를 바인딩해야
Provicer
컴포넌트는 redux store에 접근해야 하는 모든 중첩된 컴포넌트들이 redux의 store를 사용할 수 있게 한다.
react-redux의 모든 store에 연결할 수 있기 때문에, 대부분의 애플리케이션들은 <Provider>
컴포넌트를 전체 애플리케이션 컴포넌트들의 가장 상단에 렌더한다.
그러면 hooks 와 connect API들은 제공된 store에 접근할 수 있다.
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root'),
);
: selector function을 통해서 store로부터 데이터를 추출할 수 있도록 해준다.
connect
함수없이 redux store에서 state를 조회할 수 있다.