先重写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';为什么报错?
因为我这里写了第二个参数, 所以必须得传, 想不报错就把他删掉也行
