Custom provider doesn't update Store

[BogdanScherban]

@fzaninotto

Francois, I need in your advice. Could you please help me?

WHAT I WANT TO DO

I created custom form. It is custom because:

1. Form include a lot of custom elements, which can't be done by React-Admin functionality;
2. Some values should be calculated automatically

When this form is submited, I run request by custom data provider:

    submitForm = data => {
        .....
        // Some actions, calculations etc.
        .....
        const formData = Object.assign({}, data, additionalData);
        if (isCreate) {
            customDataProvider(CREATE, 'vitalsigns', { data: formData });
        } else {
           .......
           // Some actions
            ......
            customDataProvider(UPDATE, 'vitalsigns', { id: id, data: formData });
        }
        history.push('/vitalsigns');
    };

WHERE IS PROBLEM:

Request from the client side to the server side was sent correctly.

But data in Store isn't updated. Values in React-store are the same, which was before form submitting:

All other plugins, where we use React-Admin forms (like Allergies), data updates automatically.

Why data in React-store isn't updated automatically?

Could you please help me to find a reason, why data wasn't updated? And how to provide data updating?

My Form:
https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/version/plugins/Vitals/fragments/Form.js

My Custom data Provider:
https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/core/dataProviders/dataProvider.js

[fzaninotto]

If you call the data Provider directly, you're effectively bypassing the Redux store. React-admin doesn't call the data provider directly. It dispatches Redux actions that have a fetch meta. The fetch saga catches these actions and calls the data provider. Then, the saga updates the store with the response.

If you want the store to be refreshed after submission in your form, you have two choices:

• you can dispatch a refeshView() action by hand once the dataProvider returns. This will force a render of the page, and a fetch of the current record (quick, but not very clean)
• you can dispatch a crudUpdate() action instead of calling the data provider by hand. This action calls the data provider AND updates the store with the response. That's what react-admin actually does, see https://github.com/marmelab/react-admin/blob/2116fccae043d63518867c769a6fc59a06aa0910/packages/ra-core/src/controller/EditController.tsx#L127-L133

In addition, I see two problems in the screenshot you've pasted:

• The custom inputs that you'e using don't use the same look and feel as the inputs in other pages (inset and outset aren't seen anywhere else). You should use material-ui TextField components, which accept input prefix and suffix (https://v1-5-0.material-ui.com/demos/text-fields/#input-adornments)
• I think you've done a lot of work to manage the state that can be handled by redux-form (or any other React form library, it's just that Redux-form is already installed by react-admin). 50% of the custom Form code can be removed by using an external form library.

[fzaninotto]

I suggest you reread the "Querying the API" chapter in the react-admin documentation.

https://marmelab.com/react-admin/Actions.html

[BogdanScherban]

@fzaninotto

Hi, Francois! Thank you, you advice helped me to solve this issue - crudUpdate() and crudCreate() using solved the problem.

---

About problems in the screenshot...

1. Unfortunately, I must create design maximal similar to old PulseTile Showcase:
   

But I found a way in Material-UI, how to create iOS switches:
https://material-ui.com/components/switches/#customized-switches

And I created something similar:

2. You said, that 50% of the custom Form code can be removed by using an external form library. Where can I look at example, how it can be done? I tried to set styles for RA-form (similar to old PusleTile design), but didn't find a solution and created custom form.