[React][Api] Provider 번역

react-redux.js.org/api/provider

Provider | React Redux

version: 7.2

Provider

The <Provider /> makes the Redux store available to any nested components that have been wrapped in the connect() function.

<Provider />는 connect() 함수 안의 감싸진 모든 중첩된 컴포넌트의 Redux store를 사용할 수 있도록 합니다.

 

Since any React component in a React Redux app can be connected, most applications will render a <Provider> at the top level, with the entire app’s component tree inside of it.

React Redux app의 모든 React component를 연결 할 수 있으므로 대부분의 applications는 전체 app's component tree가 내부에 있는 top level 에서 <Provider>를 render할 것이다.

 

Normally, you can’t use a connected component unless it is nested inside of a <Provider>.

일반적으로 <Provider> 내부의 연결된 component가 중첩되어 있지 않으면 사용할 수 없다.

 

Props

store : (Redux Store) The single Redux store in your application.

store : (Redux Store) application 안의 single redux store.

 

children : (ReactElement) The root of your component hierarchy.

children : (ReactElement) component 계층의 root.

 

context : You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in runtime error:

context : context 인스턴스를 제공할 수 있다. 이렇게 하면 모든 연결된 components의 동일한 context 인스턴스를 제공해야 한다. 올바른 context를 제공하지 않으면 런타임 오류가 발생.

 

 

Invariant Violation

Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Todo) in connect options.

불변 위반

connect(MyComponent) 컨텍스트에서 store를 찾을 수 없다. <Provider> 의 root component를 wrap하거나 custom react context 공급자를 <Provider>의 전달하고 해당 React context 소비자를 연결 옵션의 Connect(Todo)에 전달 합니다.

 

Note: You do not need to provide custom context in order to access the store. React Redux exports the context instance it uses by default so that you can access the store by:

store의 접근하기 위해서 custom context를 제공할 필요가 없다. React redus는 기본적으로 사용하는 인스턴스 context를 exports하므로 store의 다음과 같이 접근 할 수 있다.

import { ReactReduxContext } from 'react-redux'

// in your connected component
render() {
  return (
    <ReactReduxContext.Consumer>
      {({ store }) => {
        // do something with the store here
      }}
    </ReactReduxContext.Consumer>
  )
}

Example Usage#

In the example below, the <App /> component is our root-level component. This means it’s at the very top of our component hierarchy.

아래 예제에서 <App /> component는 root-level의 component입니다. 즉, component 계층 맨 위에 있습니다.

 

Vanilla React Example

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

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

Usage with React Router

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route } from 'react-router-dom'

import { App } from './App'
import { Foo } from './Foo'
import { Bar } from './Bar'
import createStore from './createReduxStore'

const store = createStore()

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route exact path="/" component={App} />
      <Route path="/foo" component={Foo} />
      <Route path="/bar" component={Bar} />
    </Router>
  </Provider>,
  document.getElementById('root')
)