React-Redux로 스토어에 접근하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Redux를 사용하면 JavaScript 앱의 중앙 위치에 데이터를 저장할 수 있습니다. 단독으로 작동할 수 있으며 React-Redux와 결합할 때 React 앱을 위한 인기 있는 상태 관리 솔루션이기도 합니다.

이 기사에서는 React-Redux를 사용하여 Redux 스토어에 액세스하는 방법을 살펴보겠습니다.

스토어 액세스

React-Redux를 사용하면 mapStateToProps 함수를 정의하여 저장소에 액세스할 수 있습니다.

그러나 사용자 지정 방식으로 액세스할 수도 있습니다. 내부적으로 React-Redux는 React의 Context API를 사용하여 깊이 중첩된 연결된 구성 요소에 Redux 저장소에 액세스할 수 있도록 합니다.

현재 React-Redux는 일반적으로 React.createContext()라는 ReactReduxContext에 의해 생성된 단일 기본 컨텍스트 개체 인스턴스에 의해 처리됩니다.
Provider는 ReactReduxContext.Provider를 사용하여 Redux 저장소와 현재 상태를 컨텍스트에 넣고 connect는 ReactReduxContext.Consumer를 사용하여 값을 읽고 업데이트를 처리합니다.

맞춤 컨텍스트 제공

context 소품을 통해 React-Redux에 사용자 정의 컨텍스트를 제공할 수 있습니다.

예를 들어 다음 코드에서 자체 컨텍스트를 전달할 수 있습니다.

import React from "re
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";
import { createStore } from "redux";
function count(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}
const store = createStore(count);

function App({ increment, decrement, count }) {
  return (
    <div className="App">
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <p>{count}</p>
    </div>
  );
}
const mapStateToProps = state => {
  return { count: state };
};
const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });
const customContext = React.createContext();

App = connect(
  mapStateToProps,
  { increment, decrement },
  null,
  { context: customContext }
)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store} context={customContext}>
    <App />
  </Provider>,
  rootElement
);

위의 코드에는 App 를 통해 스토어를 connect 구성 요소에 연결하기 위한 일반적인 React-Redux 코드가 있습니다.

그러나 다음을 통해 customContext를 생성합니다.

const customContext = React.createContext();

그런 다음 connect 호출에서 다음을 수행합니다.

App = connect(
  mapStateToProps,
  { increment, decrement },
  null,
  { context: customContext }
)(App);

네 번째 인수는 { context: customContext } 입니다. 여기에서 맞춤 컨텍스트를 설정합니다.

또한 다음이 있습니다.

<Provider store={store} context={customContext}>
  <App />
</Provider>

context를 통해 context={customContext} 소품을 설정하려면  .

여러 상점

다음과 같이 공급자를 중첩하여 React-Redux와 함께 여러 저장소를 사용할 수도 있습니다.

import React from "react";
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";
import { createStore, compose } from "redux";
function countA(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    default:
      return state;
  }
}

function countB(state = 0, action) {
  switch (action.type) {
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

const storeA = createStore(countA);
const storeB = createStore(countB);
function App({ increment, decrement, countA, countB }) {
  return (
    <div className="App">
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <p>{countA}</p>
      <p>{countB}</p>
    </div>
  );
}
const mapStateToPropsA = state => {
  return { countA: state };
};

const mapStateToPropsB = state => {
  return { countB: state };
};

const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });
const contextA = React.createContext();
const contextB = React.createContext();

App = compose(
  connect(
    mapStateToPropsA,
    { increment },
    null,
    { context: contextA }
  ),
  connect(
    mapStateToPropsB,
    { decrement },
    null,
    { context: contextB }
  )
)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={storeA} context={contextA}>
    <Provider store={storeB} context={contextB}>
      <App />
    </Provider>
  </Provider>,
  rootElement
);

위의 코드에서 다음과 같이 작성하여 2개의 개별 저장소를 정의했습니다.

const storeA = createStore(countA);
const storeB = createStore(countB);

여기서 countA 및 countB는 감속기입니다.

그런 다음 connect 함수의 인수 내에서 compose 호출을 중첩하여 다음과 같이 연결을 결합합니다.

App = compose(
  connect(
    mapStateToPropsA,
    { increment },
    null,
    { context: contextA }
  ),
  connect(
    mapStateToPropsB,
    { decrement },
    null,
    { context: contextB }
  )
)(App);

이 호출 전에 2개의 상점에서 상태를 매핑하기 위해 mapStateToPropsA 및 mapStateToPropsB를 정의했습니다.

그런 다음 각 connect의 마지막 인수에서 저장소를 context에 연결하는 데 사용하려는 App 개체를 전달합니다.

그런 다음 ReactDOM.render 호출에서 다음을 전달합니다.

<Provider store={storeA} context={contextA}>
  <Provider store={storeB} context={contextB}>
    <App />
  </Provider>
</Provider>

각 공급자에 대해 사용하려는 store 및 context를 설정합니다. 각 Provider의 context 소품은 connect  와 일치해야 합니다.

결론

여러 개Providers를 중첩하고 각각에 대한 저장소와 컨텍스트를 제공하여 여러 저장소에 액세스할 수 있습니다.

컨텍스트는 구성 요소 간에 데이터를 공유하는 데 사용되는 React Context API의 일부인 React.createContext()를 호출하여 정의됩니다.

그런 다음 compose 함수를 사용하여 여러 connect 호출을 함께 추가할 수 있습니다. 각 호출에서 connect의 네 번째 인수로 전달합니다.
compose를 호출할 필요가 없다는 점을 제외하고 동일한 방법을 사용하여 단일 상점에 대한 액세스를 맞춤설정할 수도 있습니다.