我有一個模擬的JSON文件，我在我的項目正在導入：模擬json文件如何將其包含在我的項目中？

import data from './config/data.json';

如何將其包含在我的項目，所以所有組件可以使用它？

我使用react-router

render(
    <Provider store={store}> 
     <Router history={browserHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
);

來源

2017-08-08 Bomber

如果我理解正確，你想加載老店數據？

是的，它以前保存

然後，存儲對象，同時創造通過preloadedState參數商店，更多信息頭createStore docs

createStore(reducer, [preloadedState], [enhancer])

你可以注入它沒有它就像配置或使通用數據：

最佳做法，並進行調試後跟隨Redux的流動，附加動作類型（前GET_CONFIG），並分派到減速能力，東西這樣

// Create Action Type 
 
const GET_CONFIG = 'GET_CONFIG'; 
 

 
// Import json (you might need to handle webpack json-loader) 
 
import config from './config/data.json'; 
 

 
// Dispatch it (you can access the dispatch method from the store directly, outside the connect function) 
 
store.dispatch({type: GET_CONFIG, config}); 
 
render(
 
    <Provider store={store}> 
 
     <Router history={browserHistory} routes={routes} /> 
 
    </Provider>, 
 
    document.getElementById('root') 
 
);

來源

2017-08-08 10:22:20

你可以把它添加到您的商店。我不確定你使用什麼樣的狀態管理，但是如果你在商店的構造函數中導入你的data.json對象，你應該能夠設置一些默認值。在事情的反應方面，您可以通過訪問商店訪問您的data.json數據。

// YourStore.js 
import data from './config/data.json'; 
class YourStore{ 
    constructor() { 
     this.loadedData = data; 
    } 
} 

// entry.js 
import YourStore from './stores/YourStore.js'; 
const store = new YourStore(); 
render(
    <Provider store={store}> 
     <Router history={browserHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
);

來源

2017-08-08 10:20:28 afterburn

您可以從您的JSON文件的初始化狀態（或它的一部分）的數據傳遞到您的createStore功能。然後它將通過您的應用程序的redux商店。

const initialState = { 
    data, 
    ...otherData, 
} 

const store = createStore(combineReducers({ 
    ...Reducers, 
    router: routerReducer, 
    }), 
    initialState, 
)); 

render(
    <Provider store={store}> 
     <Router history={browserHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
);

來源

2017-08-08 10:21:05

在主佈局文件中像

<Route path="/" component={PublicLayout}> 
    <IndexRoute component={LoginPage}></IndexRoute> 
    <Route path="/login" component={LoginPage}></Route> 
</Route>

在你PublicLayout構造函數（）在

this.state = { 
source: data; // which is => import data from './config/data.json'; 
}

然後在您的渲染方法將它作爲道具的子組件。現在我不知道您在使用哪種上下文，但我認爲這應該有所幫助。

或者另一種選擇是使用Redux和def enter code here ine reducer並將此json數據分配給您的redux狀態，然後在應用程序的任何位置訪問它。

或者上過僅僅用在你的WebPack文件中的別名，使 import data from './config/data.json';這是可以從你的代碼的任何地方訪問的全局路徑的最簡單方法。 Webpack將處理剩下的事情。

來源

2017-08-08 10:22:09

模擬json文件如何將其包含在我的項目中？

回答

是的，它以前保存

你可以注入它沒有它就像配置或使通用數據：

相關問題