createAsyncThunk 和使用 redux-toolkit 编写 reducer 登录

Posted 2023-02-19

【中文标题】createAsyncThunk 和使用 redux-toolkit 编写 reducer 登录

【英文标题】：createAsyncThunk and writing reducer login with redux-toolkit

【发布时间】：2020-09-13 03:59:45

【问题描述】：

我正在阅读createAsyncThunk 文档，对流程感到有些困惑。这是来自文档：

import  createAsyncThunk, createSlice  from '@reduxjs/toolkit'
import  userAPI  from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => 
    const response = await userAPI.fetchById(userId)
    return response.data
  
)

// Then, handle actions in your reducers:
const usersSlice = createSlice(
  name: 'users',
  initialState:  entities: [], loading: 'idle' ,
  reducers: 
    // standard reducer logic, with auto-generated action types per reducer
  ,
  extraReducers: 
    // Add reducers for additional action types here, and handle loading state as needed
    [fetchUserById.fulfilled]: (state, action) => 
      // Add user to the state array
      state.entities.push(action.payload)
    
  
)

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

我必须在reducers 和extraReducers 中写什么？标准 reducer 逻辑？

我有这个 CodeSandbox 我实现了旧的 redux 方式。现在，需要在其中实现redux-toolkit。

【问题讨论】：

在评论中字面上写着你需要在那里做什么。

@metalHeadDev 你有最终的实现吗？

【参考方案1】：

createSlice 的reducers 属性允许您创建一个动作创建函数并一步响应这些动作。您使用 extraReducers 来响应已经在其他地方创建的操作，例如在异步 thunk 中。 extraReducer 只是响应一个动作，但不创建动作创建函数。

这个例子是说除了extraReducers之外，你还可以有一些普通的reducers。但是我查看了您的 CodeSandbox，在您的情况下，您不需要任何其他 reducers，因为您响应的唯一操作是来自异步 thunk 的三个操作。

由于您的createSlice 不会创建任何动作创建者，因此您实际上不需要使用createSlice。你可以使用它，但你也可以只使用createReducer。

import  createAsyncThunk, createSlice  from '@reduxjs/toolkit'
import  userAPI  from './userAPI'

export const fetchUserFromGithub = createAsyncThunk(
  'users/fetch',
  async (username) => 
    const response = await axios.get(
      `https://api.github.com/users/$username`
    );
    return response.data
  
)

const usersSlice = createSlice(
  name: 'users',
  initialState: 
    user: null,
    fetchingUser: false,
    fetchingError: null
  ,
  reducers: ,
  extraReducers: 
    [fetchUserFromGithub.pending]: (state, action) => 
      state.fetchingUser = true;
      state.fetchingError = null;
    ,
    [fetchUserFromGithub.rejected]: (state, action) => 
      state.fetchingUser = false;
      state.fetchingError = action.error;
    
    [fetchUserFromGithub.fulfilled]: (state, action) => 
      state.fetchingUser = false;
      state.user = action.payload;
    
  
)