我尝试构建自定义模板。我按照https://marmelab.com/admin-on-rest//CustomApp.html页面中的App.js说明进行操作。 我将我的组件PostList连接到react-redux。我在检查员看到了请求,但商店仍然是空的。
我不知道为了正常工作而错过了什么。
App.js
import React from 'react';
// redux, react-router, redux-form, saga, and material-ui
// form the 'kernel' on which admin-on-rest runs
import { combineReducers, createStore, compose, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { Switch, Route } from 'react-router-dom';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form';
import createSagaMiddleware from 'redux-saga';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
// prebuilt admin-on-rest features
import {
adminReducer,
localeReducer,
crudSaga,
jsonServerRestClient,
TranslationProvider,
} from 'admin-on-rest';
// your app components
import PostList from './posts';
// your app labels
const messages = {
en: {
'main.heading': 'retranslate #{{ versionNumber }}',
'main.subtitle': 'Real simple translations for react.',
'current.language': 'Your current language is {{ currentLanguage }}',
'bold.thing': 'This <b>text</b> is bold',
},
et: {
'main.heading': 'retranslate #{{ versionNumber }}',
'main.subtitle': 'Väga lihtsad tõlked reactile.',
'current.language': 'Teie hetke keel on {{ language }}',
'bold.thing': 'See <b>tekst</b> on tumedam',
},
};
// create a Redux app
const reducer = combineReducers({
admin: adminReducer,
locale: localeReducer(),
form: formReducer,
routing: routerReducer,
});
const sagaMiddleware = createSagaMiddleware();
const history = createHistory();
const store = createStore(reducer, undefined, compose(
applyMiddleware(sagaMiddleware, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f,
));
const restClient = jsonServerRestClient('http://jsonplaceholder.typicode.com');
sagaMiddleware.run(crudSaga(restClient));
const Dash = () => {
return <div>Dash</div>;
};
// bootstrap redux and the routes
const App = () => (
<Provider store={store}>
<TranslationProvider messages={messages}>
<ConnectedRouter history={history}>
<MuiThemeProvider>
<div>
<AppBar title="My Admin" />
<Switch>
<Route exact path="/" render={(routeProps) => <Dash {...routeProps} />} />
<Route exact path="/posts" hasCreate render={(routeProps) => <PostList resource="posts" {...routeProps} />} />
</Switch>
</div>
</MuiThemeProvider>
</ConnectedRouter>
</TranslationProvider>
</Provider>
);
export default App;
&#13;
posts.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { crudGetList as crudGetListAction} from 'admin-on-rest';
class PostList extends Component {
componentWillMount() {
this.props.crudGetList('posts', {page: 1, parPage: 10}, {field: 'id', order: 'ASC'});
}
render() {
return <div>Posts</div>
}
}
function mapStateToProps(state) {
console.log(state.admin.resources);
return {
list: []
}
}
export default connect(mapStateToProps, {
crudGetList: crudGetListAction
})(PostList)
&#13;
答案 0 :(得分:0)
我们的文档已于今天更新。您错过了以下一行:
store.dispatch(declareResources([{ name: 'posts' }]));
您可以在声明restClient