是的，它是先前保存的商店对象

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>

在<{p>中的PublicLayout构造函数（）中

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

然后在你的render方法中将它作为prop组件传递给子组件。现在我不知道你在使用哪种环境，但我认为这应该有所帮助。

或者另一个选择是使用Redux和def enter code here ine reducer并将此json数据分配给redux状态，然后在应用程序的任何位置访问它。

或者最简单的方法是在webpack文件中使用Alias并制作 import data from './config/data.json';这是一个可以从代码中的任何位置访问的全局路径。 Webpack将处理剩下的事情。

Answer 4

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

是的，它是先前保存的商店对象

然后你可以通过preloadedState参数在创建商店时注入它，欲了解更多信息，请前往createStore docs

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

没有配置等通用数据：

为了获得最佳实践和调试能力，请遵循Redux流程，添加动作类型（例如GET_CONFIG）并将其发送到reducers，类似这样的

＆＃13;

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

＆＃13;

模拟json文件如何将其包含在我的项目中？

4 个答案:

是的，它是先前保存的商店对象

没有配置等通用数据：