React / Redux / Meteor: метод, который отправляет действие в обратном вызове, вызывается дважды - PullRequest
Новая
       44

React / Redux / Meteor: метод, который отправляет действие в обратном вызове, вызывается дважды

0 голосов
/ 21 января 2020

У меня есть приложение React / Redux / Meteor, в котором я отправляю действие, которое вызывает метод для получения значения с сервера, а метод имеет обратный вызов, в котором я отправляю действие для сохранения возвращенного значения в Redux store.

Я также использую Redux thunk.

Хотя мое исходное действие отправляется только один раз, оно выполняется дважды. Кажется, что отправка действия изнутри обратного вызова метода приводит к повторной отправке исходного действия.

В моем компоненте React: 

class MyComponent extends Component {
    ....
    render() {
    ...
    }
}

function mapStateToProps(state, ownProps) {
    return { value: state.myPartialState.value }
}

const Tracker = withTracker(({dispatch}) => {
const state = store.getState();
const isLoading = getIsLoading(state);
...

const handle = Meteor.subscribe('myData'), {
onReady: () => {
    'onReady': () => {
        secondaryPatternSubscriptions(patterns);
    },
});

if (isLoading && handle.ready()) {
    console.log('about to dispatch original action');
    dispatch(getValue());
    dispatch(setIsLoading(false));
} else if (!isLoading && !handle.ready()) {
    dispatch(setIsLoading(true));
}

return { ... }
)(MyComponent);

export default connect(mapStateToProps)(Tracker);

В моем файле действий: 

export const SET_VALUE = 'SET_VALUE';

export function setValue(value) {
    return {
        'type': 'SET_VALUE',
        'payload': value,
    };
}

export const getValue = () => (dispatch, getState) => {
    console.log('about to call');
    Meteor.call('getValue', (error, result) => {
        console.log('about to dispatch second action');
        dispatch(setValue(result)); // this causes the action to be dispatched again
    });

    // dispatch(setValue(10)); // this only runs once
};

const initialState = {
    value: 0,
}

export default function myPartialState(state = initialState, action) {
    switch (action.type) {
        case SET_VALUE: {
            return updeep({ 'value': action.payload }, state);
        }
    }
}

На сервере этот метод выглядит следующим образом: 

Meteor.methods({
'getValue': function () {
...
return value;
},
})

Из журналов консоли видно, что getValue отправляется только один раз, но запускается дважды. Я проверял это снова и снова, и я почти на 100% уверен, что getValue не отправляется дважды.

Я думаю, что это как-то связано с вызовом действия изнутри обратного вызова метода; если я закомментирую рассылку (setValue (результат)); и замените его отправкой вне вызова метода, тогда getValue запускается только один раз.

Если я отправлю другое действие вместо setValue или изменим действие setValue, чтобы оно не изменяло свойство 'value' в магазине, затем снова getValue запускается только один раз. Но я не могу понять, почему изменение 'value' приведет к тому, что действие будет выполнено дважды, когда оно отправляется только один раз ...

Я искал в Интернете и не нашел ничего об этой проблеме.

Кто-нибудь может подумать, почему мое действие выполняется дважды, а способ запустить его только один раз? Спасибо!

...