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 neededbuilder.addCase(fetchUserById.fulfilled, (state, action) => {// Add user to the state arraystate.entities.push(action.payload)})},因为最开始的函数返回的是一个promise , 所以第二段代码的addCase(fetchUserById.fulfilled) 就是监听到这个promise的状态, 你也可监听pendding和reject, 第二个参数写法和普通的reducers一样了,但是这个写法很麻烦,太蠢了!!!!
有没有更简单的方法?
第二种, thunkAPI
还记得这个吗
这个对象拥有访问整个store状态的权限,我们常用的就是dispatch
既然他有这个权限, 那就用它来dispatch reducers里面的同步方法不就行了? 是的! ,就这么简单
这是我的代码, 有结果直接dispatch, 不用写那么一大坨了
