ReactJS和Redux Toolkit：我可以使用'createAsyncThunk（）'执行非异步副作用吗？

Alvaro Bataller 发表于 Dev

阿尔瓦罗·巴特勒（Alvaro Bataller）

这是我的登录操作的样子，并且可以正常运行：

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（）”时，我没有添加副作用的选项，因为它直接作用于reducer（并且Redux文档说我们不应该向reducer添加任何副作用）

// 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”的适当使用吗？

希望有更多经验的人可以帮助您。

非常感谢！

这是一种可能的用途，但不必要的用途。

createAsyncThunk是对正常“ thunks动作”的抽象，该动作在之前分配“待处理”动作，之后分配“完成” /“拒绝”动作。如果您不希望这些生命周期操作，也可以编写一个普通的thunk。这些非常简单，RTK不包含任何帮助器。

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

dispatch(myThunkActionCreator(5))

有关更多信息，请参阅官方教程的本节。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。