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

1. Building React CRUD App
in minutes?
@tomaszbak

3. CRUD in React
Building a Simple CRUD App with React + Redux
Practical Redux (Redux-ORM based)
marmelab/admin-on-rest

4. Agenda
● What is admin-on-rest?
● How it is build?
● Why is it interesting?

5. What is admin-on-rest?
● highly configurable React admin panel
● built on top popular libraries
● result of over 2 years of developing admin GUIs

6. 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>
);

7. Source: https://marmelab.com/blog/2016/09/02/admin-on-rest-react-admin-framework.html

8. Source: https://github.com/marmelab/admin-on-rest-demo

9. What libs does it use?
● redux
● redux-form
● redux-saga
● recompose
● material-ui
● polyglot.js

10. 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,
// ...
});
};

11. 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 },
});
}
};

12. 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 }));
}

13. How it works?
UI
const DatagridCell = ({ field, record, basePath, resource }) => {
return (
<TableRowColumn style={style}>
{React.cloneElement(field, { record, basePath, resource })}
</TableRowColumn>
);
};

14. Why is it interesting?
● experience of developers behind admin-on-rest
● modular Redux store and components

15. Thank you!