Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Building React CRUD app in minutes?

3.027 visualizaciones

Publicado el

Whoever creates a great Redux CRUD example will score a ton of Open Source Credits

Publicado en: Software
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Building React CRUD app in minutes?

  1. 1. Building React CRUD App in minutes? @tomaszbak
  2. 2. CRUD in React Building a Simple CRUD App with React + Redux Practical Redux (Redux-ORM based) marmelab/admin-on-rest
  3. 3. Agenda ● What is admin-on-rest? ● How it is build? ● Why is it interesting?
  4. 4. What is admin-on-rest? ● highly configurable React admin panel ● built on top popular libraries ● result of over 2 years of developing admin GUIs
  5. 5. What is admin-on-rest? import { simpleRestClient, Admin, Resource } from 'admin-on-rest'; import { PostList, PostEdit, PostCreate } from './posts'; const App = () => ( <Admin restClient={simpleRestClient('http://localhost:3000')}> <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} /> </Admin> );
  6. 6. Source: https://marmelab.com/blog/2016/09/02/admin-on-rest-react-admin-framework.html
  7. 7. Source: https://github.com/marmelab/admin-on-rest-demo
  8. 8. What libs does it use? ● redux ● redux-form ● redux-saga ● recompose ● material-ui ● polyglot.js
  9. 9. How it works? uses the same reducer function for each resource export default (resources) => { const resourceReducers = {}; resources.forEach((resource) => { resourceReducers[resource.name] = resourceReducer(resource.name, resource.options); }); return combineReducers({ ...resourceReducers, loading, notification, // ... }); };
  10. 10. How it works? redux sagas call restClient and use action meta const crudFetch = (restClient) => { function* handleFetch(action) { const { type, payload, meta: { fetch: restType, ...meta } } = action; let response = yield call(restClient, restType, meta.resource, payload); yield put({ type: `${type}_SUCCESS`, payload: response, requestPayload: payload, meta: { ...meta, fetchResponse: restType, fetchStatus: FETCH_END }, }); } };
  11. 11. How it works? restClient allows to make custom API calls componentDidMount() { restClient(GET_LIST, 'reviews', { filter: { status: 'pending' }, sort: { field: 'date', order: 'DESC' }, pagination: { page: 1, perPage: 10 }, }) .then(response => this.setState({ reviews: response.data })); }
  12. 12. How it works? UI const DatagridCell = ({ field, record, basePath, resource }) => { return ( <TableRowColumn style={style}> {React.cloneElement(field, { record, basePath, resource })} </TableRowColumn> ); };
  13. 13. Why is it interesting? ● experience of developers behind admin-on-rest ● modular Redux store and components
  14. 14. Thank you!

×