admin-on-rest 自定义模板 getCrudList

Question

我尝试构建一个自定义模板。我按照页面 https://marmelab.com/admin-on-rest//CustomApp.html 中的 App.js 说明进行操作。 我将组件 PostList 连接到 React-Redux。我在检查员中看到了请求，但商店仍然是空的。

我不知道为了正常工作而错过了什么。

应用程序.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;

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)

Answer 1

我们的文档今天已更新。您缺少以下行：

store.dispatch(declareResources([{ name: 'posts' }]));

您可以在申报您的

restClient

之前插入它