模拟 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

如果我理解正确，您想加载旧商店数据吗？

是的，这是以前保存的存储对象

然后，您可以在通过preloadState参数创建存储时注入它， 有关更多信息，请前往创建商店文档

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

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>

在你的PublicLayoutconstructor(( 中

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

然后在渲染方法中将其作为道具传递给子组件。 现在我不知道你在哪个上下文中使用，但我认为这应该会有所帮助。

或者另一种选择是使用 Redux 和 defenter code here化简器并将此 json 数据分配给您的 redux 状态，然后在应用程序中的任何位置访问它。

或者最简单的方法就是在你的 webpack 文件中使用别名并制作import data from './config/data.json';将其作为全局路径，可以从代码中的任何位置访问。Webpack将处理其余的工作。

Answer 4

您可以将其添加到您的商店中。我不确定您使用哪种状态管理，但是如果您在商店的构造函数中导入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')
);