Redux-React 통합

이전 장에서 우리는 Redux가 무엇이며 어떻게 작동하는지 배웠습니다. 이제 뷰 파트와 Redux의 통합을 확인하겠습니다. Redux에 모든 뷰 레이어를 추가 할 수 있습니다. 리 액트 라이브러리와 Redux에 대해서도 논의 할 것입니다.

다양한 반응 구성 요소가 최상위 구성 요소에서 아래로 내려가는 모든 구성 요소에 소품으로 전달하지 않고 동일한 데이터를 다른 방식으로 표시해야하는 경우를 가정 해 보겠습니다. 반응 구성 요소 외부에 저장하는 것이 이상적입니다. 다른 구성 요소로 데이터를 전달할 필요가 없기 때문에 더 빠른 데이터 검색에 도움이되기 때문입니다.

Redux로 어떻게 가능한지 논의하겠습니다. Redux는 react-redux 패키지를 제공하여 아래와 같이 두 가지 유틸리티로 반응 구성 요소를 바인딩합니다.

Provider
Connect

공급자는 응용 프로그램의 나머지 부분에서 스토어를 사용할 수 있도록합니다. Connect 기능은 매장 상태에서 발생하는 각 변경 사항에 응답하여 구성 요소를 매장에 연결하는 데 도움이됩니다.

살펴 보겠습니다. root index.js 저장소를 만들고 react-redux 앱의 나머지 앱에 대한 저장소를 활성화하는 공급자를 사용하는 파일입니다.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';
import App from './components/app'
import './index.css';

const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
   applyMiddleware(thunk)
)
render(
   <Provider store = {store}>
      <App />
   </Provider>,
   document.getElementById('root')
)

react-redux 앱에서 변경이 발생할 때마다 mapStateToProps ()가 호출됩니다. 이 함수에서는 반응 컴포넌트에 제공해야하는 상태를 정확하게 지정합니다.

아래에 설명 된 connect () 함수의 도움으로 이러한 앱의 상태를 반응 구성 요소에 연결합니다. Connect ()는 구성 요소를 매개 변수로 사용하는 고차 함수입니다. 특정 작업을 수행하고 마지막으로 내 보낸 올바른 데이터가 포함 된 새 구성 요소를 반환합니다.

mapStateToProps ()의 도움으로 이러한 저장소 상태를 반응 구성 요소에 소품으로 제공합니다. 이 코드는 컨테이너 구성 요소에 래핑 될 수 있습니다. 동기는 데이터 가져 오기, 렌더링 문제 및 재사용 가능성과 같은 문제를 분리하는 것입니다.

import { connect } from 'react-redux'
import Listing from '../components/listing/Listing' //react component
import makeApiCall from '../services/services' //component to make api call

const mapStateToProps = (state) => {
   return {
      items: state.items,
      isLoading: state.isLoading
   };
};
const mapDispatchToProps = (dispatch) => {
   return {
      fetchData: () => dispatch(makeApiCall())
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Listing);

services.js 파일에서 API 호출을 수행하는 컴포넌트의 정의는 다음과 같습니다.

import axios from 'axios'
import { itemsLoading, itemsFetchDataSuccess } from '../actions/actions'

export default function makeApiCall() {
   return (dispatch) => {
      dispatch(itemsLoading(true));
      axios.get('http://api.tvmaze.com/shows')
      .then((response) => {
         if (response.status !== 200) {
            throw Error(response.statusText);
         }
         dispatch(itemsLoading(false));
         return response;
      })
      .then((response) => dispatch(itemsFetchDataSuccess(response.data)))
   };
}

mapDispatchToProps () 함수는 디스패치 함수를 매개 변수로 받고 반응 컴포넌트에 전달하는 일반 객체로 콜백 소품을 반환합니다.

여기에서 반응 목록 구성 요소의 소품으로 fetchData에 액세스하여 API 호출을 수행하는 작업을 전달할 수 있습니다. mapDispatchToProps ()는 저장할 액션을 전달하는 데 사용됩니다. react-redux에서 구성 요소는 저장소에 직접 액세스 할 수 없습니다. 유일한 방법은 connect ()를 사용하는 것입니다.

아래 다이어그램을 통해 react-redux가 어떻게 작동하는지 이해합시다.

STORE − 모든 애플리케이션 상태를 JavaScript 객체로 저장

PROVIDER − 매장 이용 가능

CONTAINER − 앱 상태 가져 오기 및 구성 요소에 소품으로 제공

COMPONENT − 사용자는 뷰 컴포넌트를 통해 상호 작용합니다.

ACTIONS − 스토어 변경, 앱 상태 변경 여부 변경

REDUCER − 앱 상태를 변경하고, 상태 및 작업을 수락하고, 업데이트 된 상태를 반환하는 유일한 방법입니다.

그러나 Redux는 독립적 인 라이브러리이며 모든 UI 레이어와 함께 사용할 수 있습니다. React-redux는 반응과의 UI 바인딩 인 공식 Redux입니다. 또한 좋은 반응 Redux 앱 구조를 장려합니다. React-redux는 내부적으로 성능 최적화를 구현하므로 필요할 때만 구성 요소를 다시 렌더링합니다.

요약하자면 Redux는 가장 짧고 빠른 코드를 작성하도록 설계되지 않았습니다. 예측 가능한 상태 관리 컨테이너를 제공하기위한 것입니다. 특정 상태가 언제 변경되었는지 또는 데이터의 출처를 이해하는 데 도움이됩니다.