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

Question

我有一個模擬的json文件，該文件正在我的項目中導入：

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

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

我正在使用react-router

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

Answer 1

您可以將其添加到您的商店。 我不確定您使用哪種狀態管理，但是如果您在商店的構造函數中導入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')
);

Answer 2

您可以將json文件中的數據作為initialState（或其一部分）傳遞給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')
);

Answer 3

在您的主布局文件中

<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';
}

然后在您的render方法中將它作為道具傳遞給子組件。 現在，我不知道您使用的是哪種環境，但是我認為這應該有所幫助。

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

或者最簡單的方法就是只在Webpack文件中使用Alias並import data from './config/data.json'; 這是一條全局路徑，可以從代碼中的任何位置訪問。 Webpack將處理其余的工作。

Answer 4

如果我理解正確，您是否要加載舊的商店數據？

是的，它是以前保存的商店對象

然后，您可以在通過preloadedState參數創建商店時注入它，有關更多信息，請參閱createStore文檔

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

不，它是諸如配置之類的通用數據：

為了獲得最佳實踐並能夠稍后按照Redux流程對其進行調試，請添加操作類型（例如GET_CONFIG）並將其分派給reducer，如下所示

 // 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') );