How to update data from redux store outside react app?

Question

React

There are app react and just js files outside of react that just work with the DOM.
From js, as soon as I received data via ajax, I call the api method from app react to update the data in the store. In the console, I see that there have been changes, but it turned out that a new store is being created and the data is being written there. And the main store is not touched at all. I really hoped that I would call the api method and the task would be solved, it turned out that no. Tell me, how much is it realistic to update the data from the redux store from the js side?

api methods
```

export function setPersonalCardImage(image){
    store.dispatch(actionSetPersonalCardImage(image));
}
export function setPersonalCardFio(fio){
    store.dispatch(actionSetPersonalCardFio(fio));
}
export function setPersonalCardBirthDay(birth_day){
    store.dispatch(actionSetPersonalCardBirthDay(birth_day));
}
export function setPersonalCardAge(age){
    store.dispatch(actionSetPersonalCardAge(age));
}

export function loadData(data){
    setPersonalCardAddress(data.address);
    setPersonalCardAge(data.age);
    setPersonalCardBirthDay(data.birth_day);
    setPersonalCardContactList(data.contact_list);
    setPersonalCardFio(data.fio);
    setPersonalCardFullAddress(data.full_address);
    setPersonalCardCoords(data.coords);
    setPersonalCardHasChildren(data.has_children);
    setPersonalCardImage(data.image);
    setPersonalCardPlaceId(data.geo_place_id);
    setPersonalCardPlaceName(data.geo_place_name);
    setPersonalCardRelocation(data.relocation);
    setPersonalCardRelocationPlaces(data.relocation_places);
    setPersonalCardSex(data.sex);
    setPersonalCardSocialStatus(data.social_status);
    setPersonalCardZodiac(data.zodiac);
}

I call the loadData api method and fill in the data before loading the page,
this works, everything is fine.

if(document.getElementById('personal-card')){
    let data = $('#personal-card').attr('cu-personal-card-data');
    if(data !== undefined && data !== false && data!=='[]'){
        loadData(data ); // loadData api method
        $('#personal-card').removeAttr('cu-personal-card-data');
    }

    ReactDOM.render(
        <Provider store={store}>
            <PersonalCard/>
        </Provider>,
        document.getElementById('personal-card'),
    );
}

But, as soon as I call the loadData api method outside the react app (from a regular js file) after receiving data from the server, the data is written to the new store, and the main one is not updated.

import { loadData } from "../../../../../../../../../frontend/web/js/react/api/personal-card-api";
updatePersonalCard = () => {
            $.ajax({
                url: 'get-personal-card-data',
                type: 'post',
                dataType: 'json',
                success: function(data){
                    loadData(data); // api method
                }
            });
        },

Answer 1

Here is an example, from an external event I update the store in redux
https://codesandbox.io/s/async-currying-96exm?font...
Only there is one thing, but before calling onclick="onSetSize(9,9)" you need make sure this function is already in window