Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building React CRUD app in minutes?

930 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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!

×