當使用React路由器時，在哪裏存儲全局範圍

當談到使用React時，仍然是新手。我正在使用React Router創建我的第一個應用程序，並試圖更多地利用本地狀態，並避免在我的全局範圍內有很多元素。當使用React路由器時，在哪裏存儲全局範圍

但是，我將需要一些，我不確定我應該在哪裏插入'全局'狀態或最佳實踐在這裏。在過去，我一直把它裏面App.js，但使用陣營路由器4我甚至不渲染，因爲我的index.js文件看起來像這樣：

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

應該在全球範圍只是生活中路線？只是尋找最佳實踐建議！

來源

2017-10-10 Sad Bones Malone

我不認爲我明白你清楚。你能再次解釋你的問題嗎？ – cyonder

對不起。我希望生活在'全局狀態'中的一些變量（意味着它們可以從應用程序中的任何地方訪問，並且可以輕鬆傳遞到組件）。在過去，我一直把這個狀態放在App組件中。但是，現在我使用React Router，我甚至不渲染應用程序組件，而是渲染組件。我想知道是否應該將全局狀態添加到Route組件，因爲這是呈現的內容，或者是否有其他位置可以保持全局狀態。 –

您應該使用商店。這是你如何實現它。

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;

來源

2017-10-10 15:51:29 cyonder

謝謝！我不反對拉入Redux，我不確定我完全理解它的用法，而不是普通的React。當使用像這樣的Redux商店時，我是否希望最終將商店內的商品放入店內，還是仍然可以使用一堆本地狀態，並僅使用商店獲取高價值數據？ –

如果你想提高你的技能，我強烈建議你觀看Stephen Grinder的「現代React與Redux」。你可以在udemy上找到他的課程。您可以有本地狀態以及存儲。開發人員使用本地狀態進行簡單的UI更改，如切換手風琴，導航欄等。雖然，您可以創建'actions/ui.js'和'redurs/ui.js'來管理商店中的ui狀態。因此，您也可以在商店中切換手風琴。如果您認爲這是您的問題的答案，請在我的答案上打勾。 – cyonder

當使用React路由器時，在哪裏存儲全局範圍

回答

相關問題