Affecting the whole record value from a CustomField in admin-on-rest

Question

I have a Edit component in an admin-on-rest's app which internally uses ReduxForm and the code looks like this:

<Edit {...props} >
    <CustomField />
    <TextInput source="title" />
</Edit>

I am wondering how is it possible to change title from CustomField without persisting it on the on the server?

I'm not sure to understand exactly what you mean. You want to update the `title` field of your form from ỳour `CustomField`, don't you? — Jonathan Petitcolas, Mar 17 '17 at 15:34

score 5 · Accepted Answer · answered Mar 17 '17 at 15:50

You can achieve such a purpose using a custom saga and dispatching the change event from redux-form. It sounds a little bit complicated told this way, but it is not in reality. :)

First, implement custom sagas to your application:

const customSagas = [
    MyCustomEntitySagas,
];

const App = () => (
    <Admin customSagas={customSagas}>
        // ...
    </Admin>
);

Then, in your custom saga, just watch an action you will emit from your CustomField, something like:

import { change } from 'redux-form';
import { put, takeEvery } from 'redux-saga/effects';

import { CUSTOM_FIELD_CHANGE } from './actions';

export function* watchForCustomFieldChange({ payload }) {
    yield put(change('form-record', 'title', payload.newTitle));
}

export default function* root() {
    yield [
        takeEvery(CUSTOM_FIELD_CHANGE, watchForCustomFieldChange),
    ];
}

For instance, here is an action creator you may want to dispatch:

export const CUSTOM_FIELD_CHANGE = 'CUSTOM_FIELD_CHANGE';

export const customFieldChange = (newTitle) => ({
    type: CUSTOM_FIELD_CHANGE,
    payload: { newTitle },
});

The key here is the Redux Sagas. Seems a like a lot of boilerplate, but it really eases the development in final.

I tried to be as shortest as possible to prevent from too much noise. But feel free to ask if you need more informations. :)

thanks for your patience for such an informative answer. This might be a naive question but still I'm having a hard time finding a reference to the dispatch function. — omid.n, Mar 17 '17 at 16:09
No problem. It comes from Redux: http://redux.js.org/docs/api/Store.html#dispatch — Jonathan Petitcolas, Mar 17 '17 at 16:20
@JonathanPetitcolas I would really appreciate it if you could add the dispathing part. I'm new in React Redux and I have problem accessing store. — Saman Mohamadi, Jun 09 '17 at 13:27
And there is a typo, I think `form-record` should be `record-form` — Saman Mohamadi, Jun 09 '17 at 17:25

Affecting the whole record value from a CustomField in admin-on-rest

1 Answers1