[redux] 异步逻辑的两种写法

createAsyncThunk | Redux Toolkit

第一种, extraReducers

普通的reducers只能写同步代码 异步必须得用中间件的形式,就是异步代码调用完有结果了, 再调用同步的reducer, 大概这么理解, 第一种怎么用呢? 先用一个异步函数

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  },
)

怎么理解?第一个就是,第一个参数是action的type, 第二是一个异步函数 ,你可在里面写异步代码, 并且把结果返回出去,然后在extraReducers, 监听一下就行

  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    })
  },

因为最开始的函数返回的是一个promise , 所以第二段代码的addCase(fetchUserById.fulfilled) 就是监听到这个promise的状态, 你也可监听pendding和reject, 第二个参数写法和普通的reducers一样了,但是这个写法很麻烦,太蠢了!!!!

有没有更简单的方法?

第二种, thunkAPI

还记得这个吗

这个对象拥有访问整个store状态的权限,我们常用的就是dispatch

既然他有这个权限, 那就用它来dispatch reducers里面的同步方法不就行了? 是的! ,就这么简单

 这是我的代码, 有结果直接dispatch, 不用写那么一大坨了