关于extraReducers中action的问题

Question

createAsyncThunk方法中返回一个对象。
在extraReducers方法中的
[getLogin.fulfilled.type]:(state,action)=>{
    console.log('action',action)
    state.loading = false;
    state.token = action.payload
},
这个action是怎么传递过来的。里面的payload又是怎么传递的

示例代码如下

export const getLogin = createAsyncThunk('signIn/getLogin',
    async (param:{ email:string,password:string },thunkAPI)=>{
        const { data } = await axios.post('http://123.56.149.216:8080/auth/login',param)
        console.log(data.token)
        return data.token
})
export const signIn = createSlice({
    name:'signIn',
    initialState,
    reducers:{},
    extraReducers:{
        [getLogin.pending.type]:(state)=>{
            state.loading = true
        },
        [getLogin.fulfilled.type]:(state,action)=>{
            console.log('action',action)
            state.loading = false;
            state.token = action.payload
        },
        [getLogin.rejected.type]:(state)=>{
            state.loading = false
        }
    }
})

Answer 1

阿莱克斯刘 2021-07-23 08:56:24

课程的问题太多，你的问题沉下去了，刚刚才找到到，拖了这么久不好意思。

1. “这个action是怎么传递过来的”？

   action 作为 reducer “getLogin.fulfilled”的第二个参数被传递进来，而getLogin.fulfilled则是rtk的语法糖自动生成的。
   

2. “里面的payload又是怎么传递的”？

   action中的payload就是你自己在调用的时候传递进来的了。比如 reducer getLogin.fulfilled 会在 getLogin 请求api成功以后自动调用，payload 则是 getLogin 请求成功以后retun的数据，也就是“return data.token”。