리액션 라우터를 사용할 때 글로벌 스코프를 저장할 위치

Question

React를 사용할 때 여전히 초보자입니다. 나는 React Router를 사용하여 나의 첫 번째 어플리케이션을 만들고 있으며, 로컬 상태를 사용하고 내 전역 범위에서 많은 요소를 피하는 것에 더 의지하려고 노력하고있다.

그러나 나는 몇 가지가 필요할 것이고 나는 '글로벌'상태를 삽입해야하는지 또는 가장 좋은 방법이 여기에 있는지 확실하지 않습니다. 과거에 나는 항상 App.js 안에 넣어하지만 한 내하는 index.js 파일은 다음과 같습니다 이후, 심지어 렌더링하지 않는 라우터 4 반응 사용 :

ReactDOM.render(<Routes />, document.getElementById('root')) 

하면 전역 범위가 단지 내에서 살아야한다 경로? 그냥 모범 사례 제안을 찾고!

Answer 1

상점을 사용해야합니다. 이것이 당신이 그것을 구현하는 방법입니다.

하는 index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, applyMiddleware, compose } from 'redux'; 
import promise from 'redux-promise'; 
import rootReducer from "../reducers/root"; 
import Root from '../config/root'; 

let store = createStore(rootReducer, compose(
    applyMiddleware(promise), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
)); 

ReactDOM.render(
    <Root store={store} /> 
    ,document.getElementById('root') 
);\ 

Root.js

import React from 'react'; 
import { Route, BrowserRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import PropTypes from 'prop-types'; 

import Index from '../components/index'; 
import Login from '../components/login'; 
import Signup from '../components/signup'; 

const Root = ({ store }) => { 
    return(
     <Provider store={store}> 
      <BrowserRouter> 
       <div> 
        <Route exact path="/" component={Index}/> 
        <Route path="/login" component={Login}/> 
        <Route path="/signup" component={Signup}/> 
       </div> 
      </BrowserRouter> 
     </Provider> 
    ); 
}; 

Root.propTypes = { 
    store: PropTypes.object.isRequired 
}; 

export default Root;