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에서 실행하도록 넘겨주는 역할

  • createStoreapplyMiddleware로 감싸면 미들웨어가 action을 중간에 다르게 처리해서, "비동기 액션"을 보낼 수 있도록 해준다.

  • 미들웨어는 redux에 기본적으로 포함되어있지 않으며, 사용을 위해서는 redux-thunk나 redux-promise 등을 직접 설치해야

여기까지 내용은 redux middleware로 이동

react-redux

Why we use react-redux?

  • React Redux는 React용 공식 Redux UI 바인딩 라이브러리

  • Redux와 React를 함께 사용하는 경우 React Redux를 사용하여 이 두 라이브러리를 바인딩해야


Provider

  • Provicer 컴포넌트는 redux store에 접근해야 하는 모든 중첩된 컴포넌트들이 redux의 store를 사용할 수 있게 한다.

  • react-redux의 모든 store에 연결할 수 있기 때문에, 대부분의 애플리케이션들은 <Provider> 컴포넌트를 전체 애플리케이션 컴포넌트들의 가장 상단에 렌더한다.

  • 그러면 hooks 와 connect API들은 제공된 store에 접근할 수 있다.

Provider의 props

  1. store
  2. children
  3. context

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

Hooks (useSelector / useDispatch)

1.useSelector

: selector function을 통해서 store로부터 데이터를 추출할 수 있도록 해준다.

  • connect함수없이 redux store에서 state를 조회할 수 있다.
profile
delilah's journey

0개의 댓글