Redux и длительные асинхронные задачи - PullRequest
Новая
       18

Redux и длительные асинхронные задачи

0 голосов
/ 09 апреля 2019

У меня есть React SPA, где Redux создает резервную копию моего состояния. Я хочу отправить долгосрочную задачу на сервер и получать периодические обновления (например, панель загрузки или просто текст). Связь осуществляется через WebSockets. Каков рекомендуемый способ структурирования архитектуры в Redux?

Давайте добавим немного кода для ясности, с TODO, где я не знаю, что делать 

// Render 

<LoadingBar show={this.props.showLoadingBar} progress={this.props.progress} /> // From redux store connect
<button onClick={store.dispatch(startLongRunningProcess())} />

// Action

function startLongRunningProcess() {
    // TODO: Should I open my web socket here?
    return {
        action: START_LONG_RUNNING_PROCESS,
        payload: null,
    }
}

// Reducer

export default (state=initialState, action) => {
    switch(action.type) {
    case START_LONG_RUNNING_PROCESS: {
        return {
            ...state,
            showLoadingBar: true,
        }
    }
    // TODO: Where do I dispatch this guy?
    case FINISH_LONG_RUNNING_PROCESS: {
        return {
            ...state,
            showLoadingBar: false,
        }
    }
    // TODO: Where do I dispatch this guy?
    case PROGRESS_UPDATE_FROM_SERVER: {
        return {
            ...state,
            progress: action.payload.progress,
        }
    }
};

Я рад добавить больше библиотек (возможно, redux-thunk) в мой список зависимостей.

Спасибо!

1 Ответ

0 голосов
/ 09 апреля 2019

В этом случае, я думаю, вы не обязаны использовать redux-thunk или подобную библиотеку.Просто импортируйте свой магазин, где бы вы ни использовали веб-сокеты, и наберите store.dispatch с действием, которое вы используете для обновления магазина.Этого должно быть достаточно в вашем случае.

...