VIP20/15_React/day-6/code/learn-redux/src/store/slices/user-silce.js

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

const userSlice = createSlice({
  name: 'user', // 指定状态片段的名称，类似与id的功能
  initialState: {
    name: '郭郭',
    age: 18,
  }, // 指定初始状态，就是默认状态
  reducers: {
    /**
     * 每一个reducer函数 都会接收 两个 参数
     * a: state 表示 当前状态
     * b: action  一个对象，表示一个修改状态的动作 {type: '', payload }
     */
    setName(state, action) {
      //! 在slice下所有的reducer函数中 可以直接修改状态，并且会保持响应式
      state.name = '小爱';
    },
    setAge(state, { payload }) {
      // console.log(`output->action`, action);
      state.age = payload;
    },
  }, // 用来定义修改状态的各种reducer函数
});

export default userSlice.reducer;
// 在 slice对象中 会有一个属性 actions ，类型为对象。存储所有reducer函数对应构建action对象的函数

// Action Creator
export const { setName, setAge } = userSlice.actions;

// 异步处理，需要定义thunk函数
// export function asyncSetAge(age) {
//   return (dispatch, getState) => {
//     setTimeout(() => {
//       dispatch(setAge(Number(age) || 0));
//     }, 1000);
//   };
// }

// 上面代码优化
export const asyncSetAge = (age) => (dispatch, getState) => {
  setTimeout(() => {
    dispatch(setAge(Number(age) || 0));
  }, 1000);
};

// export const asyncSetAge = (dispatch, getState) => {
//   // console.log(dispatch);
//   // console.log(getState);
//   // let state = getState();
//   // console.log(state);
//   setTimeout(() => {
//     dispatch(setAge(Number(age) || 0));
//   }, 1000);
// };