Как поменять (обновить) редукс-магазин вне сайта реагировать? - PullRequest
Новая
       0

Как поменять (обновить) редукс-магазин вне сайта реагировать?

0 голосов
/ 24 февраля 2020

Любое тело скажи мне, пожалуйста. Как я могу изменить (обновить) реакцию магазина на избыточность? просто у меня есть модал с ajax, когда я получаю ответ от сервера, я хотел бы обновить некоторые элементы из магазина редуктора. Я пытался вызвать метод API для обновления, но создал новое хранилище, которое отличается от основного хранилища редукторов

редуктор 

import * as types from "../actions/action-types";
const initialState = {
    image: null,
    fio: null,
    sex: null,
    age: null,
    birth_day: null,
    zodiac: null,
    place_id: null,
    place_name: null,
    relocation: false,
    relocation_places: [],
    address: null,
    full_address: null,
    coords: [],
    social_status: null,
    has_children: false,
    contact_list: null
};

export default  function(state = initialState, action){
    switch (action.type) {
        case types.SET_PERSONAL_CARD_IMAGE:
            return {
                ...state,
                image: action.image
            };
        case types.SET_PERSONAL_CARD_FIO:
            return {
                ...state,
                fio: action.fio
            };
        case types.SET_PERSONAL_CARD_AGE:
            return {
                ...state,
                age: action.age
            };
        case types.SET_PERSONAL_CARD_BIRTH_DAY:
            return {
                ...state,
                birth_day: action.birth_day
            };
        case types.SET_PERSONAL_CARD_SEX:
            return {
                ...state,
                sex: action.sex
            };
        case types.SET_PERSONAL_CARD_ZODIAC:
            return {
                ...state,
                zodiac: action.zodiac
            };
        case types.SET_PERSONAL_CARD_PLACE_ID:
            return {
                ...state,
                place_id: action.place_id
            };
        case types.SET_PERSONAL_CARD_PLACE_NAME:
            return {
                ...state,
                place_name: action.place_name
            };
        case types.SET_PERSONAL_CARD_RELOCATION:
            return {
                ...state,
                relocation: action.relocation
            };
        case types.SET_PERSONAL_CARD_RELOCATION_PLACES:
            return {
                ...state,
                relocation_places: action.relocation_places
            };
        case types.SET_PERSONAL_CARD_ADDRESS:
            return {
                ...state,
                address: action.address
            };
        case types.SET_PERSONAL_CARD_FULL_ADDRESS:
            return {
                ...state,
                full_address: action.full_address
            };
        case types.SET_PERSONAL_CARD_COORDS:
            return {
                ...state,
                coords: action.coords
            };
        case types.SET_PERSONAL_CARD_HAS_CHILDREN:
            return {
                ...state,
                has_children: action.has_children
            };
        case types.SET_PERSONAL_CARD_SOCIAL_STATUS:
            return {
                ...state,
                social_status: action.social_status
            };
        case types.SET_PERSONAL_CARD_CONTACT_LIST:
            return {
                ...state,
                contact_list: action.contact_list
            };
    }
    return state;
}

действия 

import * as types from '../actions/action-types';

export function actionSetPersonalCardImage(image){
    return {
        type: types.SET_PERSONAL_CARD_IMAGE,
        image
    }
}
export function actionSetPersonalCardFio(fio){
    return {
        type: types.SET_PERSONAL_CARD_FIO,
        fio
    }
}
export function actionSetPersonalCardBirthDay(birth_day){
    return {
        type: types.SET_PERSONAL_CARD_BIRTH_DAY,
        birth_day
    }
}
export function actionSetPersonalCardAge(age){
    return {
        type: types.SET_PERSONAL_CARD_AGE,
        age
    }
}
export function actionSetPersonalCardSex(sex){
    return {
        type: types.SET_PERSONAL_CARD_SEX,
        sex
    }
}
export function actionSetPersonalCardZodiac(zodiac){
    return {
        type: types.SET_PERSONAL_CARD_ZODIAC,
        zodiac
    }
}
export function actionSetPersonalCardPlaceId(place_id){
    return {
        type: types.SET_PERSONAL_CARD_PLACE_ID,
        place_id
    }
}
export function actionSetPersonalCardPlaceName(place_name){
    return {
        type: types.SET_PERSONAL_CARD_PLACE_NAME,
        place_name
    }
}
export function actionSetPersonalCardRelocation(relocation){
    return {
        type: types.SET_PERSONAL_CARD_RELOCATION,
        relocation
    }
}
export function actionSetPersonalCardRelocationPlaces(relocation_places){
    return {
        type: types.SET_PERSONAL_CARD_RELOCATION_PLACES,
        relocation_places
    }
}
export function actionSetPersonalCardAddress(address){
    return {
        type: types.SET_PERSONAL_CARD_ADDRESS,
        address
    }
}
export function actionSetPersonalCardFullAddress(full_address){
    return {
        type: types.SET_PERSONAL_CARD_FULL_ADDRESS,
        full_address
    }
}
export function actionSetPersonalCardCoords(coords){
    return {
        type: types.SET_PERSONAL_CARD_COORDS,
        coords
    }
}
export function actionSetPersonalCardHasChildren(has_children){
    return {
        type: types.SET_PERSONAL_CARD_HAS_CHILDREN,
        has_children
    }
}
export function actionSetPersonalCardContactList(contact_list){
    return {
        type: types.SET_PERSONAL_CARD_CONTACT_LIST,
        contact_list
    }
}
export function actionSetPersonalCardSocialStatus(social_status){
    return {
        type: types.SET_PERSONAL_CARD_SOCIAL_STATUS,
        social_status
    }
}

типы действий 

// personal card
export const SET_PERSONAL_CARD_IMAGE = 'SET_PERSONAL_CARD_IMAGE';
export const SET_PERSONAL_CARD_FIO = 'SET_PERSONAL_CARD_FIO';
export const SET_PERSONAL_CARD_AGE = 'SET_PERSONAL_CARD_AGE';
export const SET_PERSONAL_CARD_BIRTH_DAY = 'SET_PERSONAL_CARD_BIRTH_DAY';
export const SET_PERSONAL_CARD_SEX = 'SET_PERSONAL_CARD_SEX';
export const SET_PERSONAL_CARD_ZODIAC = 'SET_PERSONAL_CARD_ZODIAC';
export const SET_PERSONAL_CARD_PLACE_ID = 'SET_PERSONAL_CARD_PLACE_ID';
export const SET_PERSONAL_CARD_PLACE_NAME = 'SET_PERSONAL_CARD_PLACE_NAME';
export const SET_PERSONAL_CARD_RELOCATION = 'SET_PERSONAL_CARD_RELOCATION';
export const SET_PERSONAL_CARD_RELOCATION_PLACES = 'SET_PERSONAL_CARD_RELOCATION_PLACES';
export const SET_PERSONAL_CARD_ADDRESS = 'SET_PERSONAL_CARD_ADDRESS';
export const SET_PERSONAL_CARD_FULL_ADDRESS = 'SET_PERSONAL_CARD_FULL_ADDRESS';
export const SET_PERSONAL_CARD_COORDS = 'SET_PERSONAL_CARD_COORDS';
export const SET_PERSONAL_CARD_HAS_CHILDREN = 'SET_PERSONAL_CARD_HAS_CHILDREN';
export const SET_PERSONAL_CARD_SOCIAL_STATUS = 'SET_PERSONAL_CARD_SOCIAL_STATUS';
export const SET_PERSONAL_CARD_CONTACT_LIST = 'SET_PERSONAL_CARD_CONTACT_LIST';

методы API 

export function getPersonalCardImage(){
    return store.getState().personalCard.image;
}
export function setPersonalCardImage(image){
    store.dispatch(actionSetPersonalCardImage(image));
}
export function getPersonalCardFio(){
    return store.getState().personalCard.fio;
}
export function setPersonalCardFio(fio){
    store.dispatch(actionSetPersonalCardFio(fio));
}
export function getPersonalCardBirthDay(){
    return store.getState().personalCard.birth_day;
}
export function setPersonalCardBirthDay(birth_day){
    store.dispatch(actionSetPersonalCardBirthDay(birth_day));
}
export function getPersonalCardAge(){
    return store.getState().personalCard.age;
}
export function setPersonalCardAge(age){
    store.dispatch(actionSetPersonalCardAge(age));
}
export function getPersonalCardSex(){
    return store.getState().personalCard.sex;
}
export function setPersonalCardSex(sex){
    store.dispatch(actionSetPersonalCardSex(sex));
}
export function getPersonalCardZodiac(){
    return store.getState().personalCard.zodiac;
}
export function setPersonalCardZodiac(zodiac){
    store.dispatch(actionSetPersonalCardZodiac(zodiac));
}
export function getPersonalCardPlaceId(){
    return store.getState().personalCard.place_id;
}
export function setPersonalCardPlaceId(place_id){
    store.dispatch(actionSetPersonalCardPlaceId(place_id));
}
export function getPersonalCardPlaceName(){
    return store.getState().personalCard.place_name;
}
export function setPersonalCardPlaceName(place_name){
    store.dispatch(actionSetPersonalCardPlaceName(place_name));
}
export function getPersonalCardRelocation(){
    return store.getState().personalCard.relocation;
}
export function setPersonalCardRelocation(relocation){
    store.dispatch(actionSetPersonalCardRelocation(relocation));
}
export function getPersonalCardRelocationPlaces(){
    return store.getState().personalCard.relocation_places;
}
export function setPersonalCardRelocationPlaces(relocation_places){
    store.dispatch(actionSetPersonalCardRelocationPlaces(relocation_places));
}
export function getPersonalCardAddress(){
    return store.getState().personalCard.address;
}
export function setPersonalCardAddress(address){
    store.dispatch(actionSetPersonalCardAddress(address));
}
export function getPersonalCardFullAddress(){
    return store.getState().personalCard.full_address;
}
export function setPersonalCardFullAddress(full_address){
    store.dispatch(actionSetPersonalCardFullAddress(full_address));
}

export function getPersonalCardCoords(){
    return store.getState().personalCard.coords;
}
export function setPersonalCardCoords(coords){
    store.dispatch(actionSetPersonalCardCoords(coords));
}
export function getPersonalCardHasChildren(){
    return store.getState().personalCard.has_children;
}
export function setPersonalCardHasChildren(has_children){
    store.dispatch(actionSetPersonalCardHasChildren(has_children));
}
export function getPersonalCardContactList(){
    return store.getState().personalCard.contact_list;
}
export function setPersonalCardContactList(contact_list){
    store.dispatch(actionSetPersonalCardContactList(contact_list));
}
export function getPersonalCardSocialStatus(){
    return store.getState().personalCard.social_status;
}
export function setPersonalCardSocialStatus(social_status){
    store.dispatch(actionSetPersonalCardSocialStatus(social_status));
}

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);
    loadModalData(data);
}

function loadModalData(location) {
    createAutoComplete(RESUME_CITY_AUTOCOMPLETE);
    createAutoComplete(RESUME_RELOCATION_AUTOCOMPLETE);
    setCuResumeLocationPlaceId(location.geo_place_id);
    setCuResumeLocationAddress(location.address);
    setCuResumeLocationFullAddress(location.full_address);
    setCuResumeLocationCoords(location.coords);
    setCuResumeLocationPlaceName(location.geo_place_name);
    setCuResumeLocationSuggestPlaceId(location.geo_place_id);
    setCuResumeLocationSuggestGeoCoords(location.coords);
    setCuResumeLocationSuggestPlaceName(location.geo_place_name);
    setCuResumeRelocation(location.relocation);
    setCuResumeRelocationPlaces(location.relocation_places);
    setSuggestValue(RESUME_CITY_AUTOCOMPLETE, location.geo_place_name);
}

function arrayColumn(array, columnName) {
    return array.map(function(value,index) {
        return value[columnName];
    })
}

export function getRelocationPlacesNames(){
    return arrayColumn(getPersonalCardRelocationPlaces(), 'place_name').join(', ');
}

и в индексе. js Я вызываю метод API loadData и устанавливаю данные, он работает. 

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

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

Но когда я вызовите метод API loadData из выходной реакции, основное хранилище редуксов не обновляется, просто создайте новое хранилище избыточных данных.

вызов из выходной реакции реагирует, когда ajax success: 

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

вызов updatePersonalCard 

checkModalForm = form => {
            let success = false;

            $.when(form.yiiActiveForm('validate'))
             .done(function (e) {
                 success = !form.find('.is-invalid').length;
            });

            if(success) {
                step.onAfterChange();
                $(document).on('draft:answered', function () {
                    updatePersonalCard();
                    $('#formModal').modal('hide')
                    $(document).off('draft:answered');
                });
            }

            return success;
        }

вызов checkModalForm 

saveModelFormClick = (e) => {
            let id_modal_form = $(e.target).closest('.modal-content').find('.modal-body').children('div:visible').children('div').prop('id'),
                form = $('#'+id_modal_form);
            checkModalForm(form);
        }

вызов saveModelFormClick 

$(document).on('click', '.save-model-form-btn', saveModelFormClick)

1 Ответ

0 голосов
/ 24 февраля 2020

Вы можете использовать сам объект магазина. 

const store= createStore({...})

// for extracting data from store
const {auth, todos} = store.getState()

//for dispatching an action
store.dispatch({
  type: types.SHOW_MODAL,
  payload:{...}


//listen for actionsCreators
store.subscribe(() => {
//do stuff

)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...