Блог

Главная - Вопросы по программированию - Каков более правильный способ обработки той же функциональности в redux-toolkit?

Каков более правильный способ обработки той же функциональности в redux-toolkit?

#reactjs #redux #react-redux #redux-thunk #redux-toolkit

Вопрос:

У меня в приложении обычный процесс выхода из системы. Пользователь выходит из системы, затем запускается повторная проверка, и если она пройдет успешно, данные из хранилища будут удалены.

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

 // thunk

const logout = createAsyncThunk('auth/logout', async () => {
  return api.auth.logout();
});

// - - -


// socket

socket.listen('LOGOUT_USER', () => {
  dispatch(userLoggedOut());
});

// - - -


// slice

const authSlice = createSlice({ // same reducer
  name: 'auth',
  initialState: {token: '', role: '', logoutStatus: 'idle'},
  reducers: {
    userLoggedOut: (state) => {
      state.token = ''
      state.role = ''
      state.logoutStatus = 'success'
    }
  },
  extraReducers: (builder) => extraReducers: (builder) => {
    builder
      // ...  
      .addCase(logout.fulfilled, (state, action) => {
        state.token = ''
        state.role = ''
        state.logoutStatus = 'success'
      })
      // ...
  },
})

И проблема в том, что у меня одинаковый код в 2 местах для очистки данных аутентификации.
Как правильно поступить в этой ситуации?
Переместить одинаковый код в отдельную функцию «handleUserLoggedOut»?

 const handleUserLoggedOut = (state) => {
  state.token = ''
  state.role = ''
  state.logoutStatus = 'success'
} 

// slice

const authSlice = createSlice({ // same reducer
  name: 'auth',
  initialState: {token: '', role: '', logoutStatus: 'idle'},
  reducers: {
    userLoggedOut: (state) => {
      handleUserLoggedOut(state)
    }
  },
  extraReducers: (builder) => extraReducers: (builder) => {
    builder
      // ...  
      .addCase(logout.fulfilled, (state) => {
        handleUserLoggedOut(state)
      })
      // ...
  },
})

Or leave only action and dispatch it from logout thunk?

 // thunk

    const logout = createAsyncThunk('auth/logout', async (payload, ({dispatch})) => {
      await api.auth.logout();
      dispatch(userLoggedOut();
    });

    // - - -


    // socket

    socket.listen('LOGOUT_USER', () => {
      dispatch(userLoggedOut());
    });

    // - - -


    // slice

    const authSlice = createSlice({ // same reducer
      name: 'auth',
      initialState: {token: '', role: '', logoutStatus: 'idle'},
      reducers: {
        userLoggedOut: (state) => {
          state.token = ''
          state.role = ''
          state.logoutStatus = 'success'
        }
      },
      extraReducers: (builder) => extraReducers: (builder) => {
        builder
          // ...  
          // ...
      },
    })
Метки: