[redux] useDispatch的两种用法

先重写2个方法先, 方便ts类型推导,如果你看不懂为什么这么写, 先看我这篇

[redux] ts声明useSelector和useDispatch-CSDN博客

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

然后在组件引入

  const dispatch = useAppDispatch();

怎么用? dispatch传入的是一个action,什么action ?

通常这个 action 对象包含两个部分：

• type：指定 action 的类型，通常是字符串。
• payload（可选）：传递给 reducer 的数据。

// 手动创建一个 action 对象
const action = { type: 'rtkSystem/signalLoss' };

// 通过 dispatch 发送 action 对象
dispatch(action);

前面写哪个切片(小仓库)哪个方法, 后面写要传的数据

例如我写

 <button
        onClick={() => dispatch({ type: 'user/changeName', payload: '饭桶' })}
      >
        点击
      </button>

就是触发user仓库下的reducers里面的changName方法

小仓库是这样的

const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: 'lsm',
    age: 24,
  },
  reducers: {
    changName(state, actions) {
      state.name = actions.payload;
    },
  },
});

但是这种写法太蠢了!!

 dispatch({ type: 'user/changeName', payload: '饭桶' })}

很容易写错前面的type,太长了, 也不优雅!! 怎么办? 可以在小仓库把reducers的方法导出就行

export const { changeName } = userSlice.actions;

他执行返回的就是一个action对象

所以在组件把它导入直接调用就行

import { changeName } from './store/user';

为什么报错? 

因为我这里写了第二个参数, 所以必须得传, 想不报错就把他删掉也行