admin-on-rest 사용자 정의 템플리트 getCrudList

Question

사용자 정의 템플리트를 빌드하려고합니다. 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 =() => { 
 
\t 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 우리의 문서는 오늘 업데이트되었습니다

Answer 1

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)

. 당신의 restClient

를 선언하기 전에

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

당신은 삽입 할 수 있습니다 : 당신은 다음 줄을 놓치고있어