w1020/20.react/高阶/my-redux/src/store/slice/user.js

import {createSlice} from '@reduxjs/toolkit';

const userSlice = createSlice({
    // name:给action对象中的type属性指定命名
    name: 'user1',
    // initialState：指定初始状态值
    initialState: {
        name:'胡图图',
        age: 3,
        address: '翻斗花园'
    },
    // 方法:存放该切片中定义的各种修改状态的reducer函数
    reducers: {
        setName(state,{payload}) {
            // console.log(state,action)
            // state.name = action.payload;
            state.name = payload;
        },
        setAge(state,{payload}) {
            state.age+=payload
        }
    }
})

export default userSlice.reducer;

// 在slice对象中 有一个actions属性 类型是对象 
// 存储所有reducer函数中的对象构建的方法
export const {setName,setAge} = userSlice.actions;


/**
 * Redux原生不支持一步处理机制 
 * 需要通过一些中间件去完成
 * RTK中内置了Thunk中间件可以完成一步任务处理
 * 在UI组件调用dispatch时，可以传入一个Action对象，
 * 还可以传入一个thunk函数
 * 继而处理异步任务，处理后 在通过dispatch中的action去修改状态
 * 
 * 
 * 什么是Thunk函数？
 * 1.可以是普通函数，也可以是async函数
 * 2.函数会接受两个参数：dispatch 和 getStaåååe 函数
 * 3.dispatch:用来异步处理后，执行状态修改
 * 4.getState:获取完整的store中的状态对象
 */

// export function asyncSetAge(age) {
//   return (dispatch,getState) => {
//     setTimeout(()=>{
//         dispatch(setAge(age))
//     },2000)
//   }
// }


export const asyncSetAge = (age) => (dispatch,getState) => {
    setTimeout(()=>{
        dispatch(setAge(age))
    },3000)
}