Question

使用React时仍然是新手。我正在使用React Router创建我的第一个应用程序，并尝试更多地使用本地状态并避免在我的全局范围内拥有大量元素。

但是，我需要一些，我不确定应该在哪里插入'全球'状态或者最佳实践是什么。在过去，我总是将它放在App.js中，但是使用React Router 4我甚至都不渲染，因为我的index.js文件看起来像这样：

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;

使用React Router时在何处存储全局范围

1 个答案: