나는 일반적으로 스택에 코드 관련 내용을 게시하지만 이것은 커뮤니티의 일반적인 생각이 무엇인지에 대한 질문에 더 가깝습니다.

데이터 / 상태를 관리하기 위해 React와 함께 Redux를 사용하는 것을 옹호하는 많은 사람들이있는 것 같지만, 둘 다 읽고 배우는 동안 옳지 않은 것을 발견했습니다.

Redux

이 페이지 하단 : http://redux.js.org/docs/basics/UsageWithReact.html (스토어 통과) React 'Context'의 "Magic"사용을 권장합니다.

한 가지 옵션은 모든 컨테이너 구성 요소에 소품으로 전달하는 것입니다. 그러나 구성 요소 트리에서 컨테이너를 렌더링하기 때문에 프레젠테이션 구성 요소를 통해서도 저장을 연결해야하기 때문에 지루합니다.

우리가 권장하는 옵션은 모든 컨테이너 구성 요소에서 저장소를 사용할 수 있도록 마술처럼 호출되는 특수 React Redux 구성 요소를 사용하는 것입니다.

반응

React Context 페이지 ( https://facebook.github.io/react/docs/context.html )에서 상단에 경고가 있습니다.

컨텍스트는 실험적인 고급 기능입니다. API는 향후 릴리스에서 변경 될 수 있습니다.

그런 다음 하단에서 :

명확한 코드를 작성할 때 전역 변수를 피하는 것이 가장 좋은 것처럼, 대부분의 경우 컨텍스트 사용을 피해야합니다.

구성 요소를 통해 모델 데이터를 전달하기 위해 컨텍스트를 사용하지 마십시오. 트리를 통해 데이터를 명시 적으로 스레딩하는 것은 이해하기 훨씬 쉽습니다.

그래서...

Redux는 store'props'를 통해 각 구성 요소로 전달하는 대신 React 'Context'기능을 사용할 것을 권장합니다 . React는 그 반대를 권장합니다.

또한 Dan Abramov (Redux의 창시자)가 이제 Facebook (React의 창시자)에서 일하는 것 같습니다.

• 내가이 모든 것을 읽고 있는가 ..?
• 이 문제에 대한 일반적인 합의는 무엇입니까 ..?

컨텍스트는 고급 기능이며 변경 될 수 있습니다. 어떤 경우에는 편의성이 단점보다 중요하므로 React Redux 및 React Router와 같은 일부 라이브러리는 실험적 특성에도 불구하고 이에 의존하기로 선택합니다.

여기서 중요한 부분은 라이브러리 라는 단어 입니다. 컨텍스트가 동작을 변경하면 라이브러리 작성자 인 우리는 . 그러나 라이브러리가 컨텍스트 API를 직접 사용하도록 요청하지 않는 한 사용자는 변경에 대해 걱정할 필요가 없습니다.

React Redux는 내부적으로 컨텍스트를 사용하지만이 사실을 공개 API에 노출하지 않습니다. 따라서 컨텍스트를 직접 사용하는 것보다 React Redux를 통해 사용하는 것이 훨씬 안전하다고 느껴야합니다. 변경되면 코드 업데이트의 부담이 사용자가 아닌 React Redux에 있기 때문입니다.

궁극적으로 React Redux는 항상 소품으로 스토어 전달을 지원하므로 컨텍스트를 완전히 피하려면 그 선택이 있습니다. 그러나 나는 이것이 비현실적이라고 말할 것입니다.

TLDR : 수행중인 작업을 실제로 알지 못하는 경우 컨텍스트를 직접 사용하지 마십시오. 내부적으로 컨텍스트에 의존하는 라이브러리를 사용하는 것은 비교적 안전합니다.

나는 다른 사람들에 대해 잘 모르지만 react-redux의 connect 데코레이터를 사용하여 구성 요소를 래핑하여 필요한 저장소의 소품 만 구성 요소로 전달하는 것을 선호합니다. 이것은 내가 그것을 소비하지 않기 때문에 어떤 의미에서 컨텍스트의 사용을 정당화합니다 (그리고 원칙적으로 내가 담당하는 코드는 그것을 소비하지 않을 것임을 알고 있습니다).

구성 요소를 테스트 할 때 래핑되지 않은 구성 요소를 테스트합니다. react-redux는 해당 구성 요소에 필요한 소품 만 전달했기 때문에 이제 테스트를 작성할 때 필요한 소품이 무엇인지 정확히 알고 있습니다.

요점은 내 코드에서 문맥이라는 단어를 본 적이없고 소비하지 않기 때문에 어느 정도 영향을 미치지 않는다는 것입니다! 이것은 Facebook의 "실험적"경고에 대해 아무 말도하지 않습니다. 컨텍스트가 사라지면 Redux가 업데이트 될 때까지 다른 모든 사람들처럼 망 쳤을 것입니다.

반응 컨텍스트에 redux를 정말 쉽게 추가 할 수있는 npm 모듈이 있습니다.

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}