Блог

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

Давайте добавим немного кода для ясности, 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 ) в свой список зависимостей.

Спасибо!

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