ReactJS и Redux Toolkit: Могу ли я использовать ' createAsyncThunk () ' выполнить неасинхронные побочные эффекты?

Вот как выглядит мое действие входа и оно работает правильно:

export const login = createAsyncThunk(
'auth/login',
async (data, thunkAPI) => {
    const response = await API.login(data)

    //Store user data in local storage
    Storage.save('user', response.data)

    // Add token to HTTP headers
    API.setToken(response.data.key)

    return response.data
})

Теперь мне нужно выполнить функцию выхода, но при использовании " createSlice () " У меня нет возможности добавлять побочные эффекты, поскольку он идет прямо в редуктор (и в документации Redux говорится, что мы не должны добавлять какие-либо побочные эффекты в редукторы)

// Slice
const authSlice = createSlice({
    name: 'auth',

    initialState: {
        user: null
    },

    reducers: {
        // Logout
        logout: (state, action) => {
            state.user = null
        },

    },
    extraReducers: {
        [login.fulfilled]: (state, action)=>{
            state.user = action.payload
        },
    }
})

Итак, я подумал, что могу использовать функцию createAsyncThunk для выполнения побочных эффектов до того, как они попадут в редуктор:

export const logout = createAsyncThunk(
    'auth/logout',
    async (thunkAPI) => {
        //Remove user data in local storage
        Storage.remove('user')

        // Remove token to HTTP headers
        API.removeToken()
    }
)

Это подходящее использование " createAsyncThunk "?

Надеюсь, кто-нибудь с большим опытом сможет помочь с этим.

Большое спасибо!

Всего 1 ответ

Автоматический диспенсер мыльной пены от xiaomi.


Это можно использовать, но в нем нет необходимости.

createAsyncThunk - это абстракция по сравнению с обычными "действиями thunks" который отправляет сообщение " ожидающий " действие до и "выполнено" / "отклонено" действие после. Если вам не нужны эти действия жизненного цикла, вы также можете просто написать обычный преобразователь. Они настолько просты, что RTK не имеет для них никакого помощника.

const myThunkActionCreator = (id) => (dispatch, getState) => {
  // some sync or async stuff
  dispatch(someResult())
}

dispatch(myThunkActionCreator(5))

Для получения дополнительной информации см. this section of the official tutorials


Есть идеи?

10000