More convenient use

[li9269391]

// reducers/cake.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type InitialState = {
  numOfCakes: number;
  nameOfCake: string;
};
const initialState: InitialState = {
  numOfCakes: 20,
  nameOfCake: 'great cake',
};

export const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    updateCakeNum: (state, action: PayloadAction<number>) => {
      state.numOfCakes = action.payload;
    },
    updateCakeName: (state, action: PayloadAction<string>) => {
      state.nameOfCake = action.payload;
    },
  },
});

export default cakeSlice.reducer;

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import cakeReducer from './reducers/cake';

const store = configureStore({
  reducer: {
    cake: cakeReducer,
  }
})

export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { Slice } from '@reduxjs/toolkit';
import type { AppDispatch, RootState } from '@/store'

type GetArrFirst<T> = T extends [infer Res, ...infer P] ? Res : unknown;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

export const useCreateReduxFunction = <S extends Slice>(slice: S) => {
  return <T extends keyof S['actions']>(name: T) => {
    const dispatch = useAppDispatch();
    const actionCreator = (slice.actions as S['actions'])[name];
    return (payload: GetArrFirst<Parameters<typeof actionCreator>>) => {
      dispatch(actionCreator(payload));
    };
  };
};

// How to supplement TS statement
export const useModel = (slice) => {
  const useActions = useCreateReduxFunction(slice);
  const actions = {};
  Object.keys(slice.actions).forEach((k) => {
    actions[k] = useActions(k);
  })
  const state = useAppSelector((state) => state[slice.name]);
  return [state, actions];
}

Use

import { cakeSlice } from '@/store/reducers/cake';
import { useModel } from '@/hook';
import { Button } from 'antd';

const App = () => {
  // Unable to derive TS declare, Need help，thank you
  const [ { nameOfCake }, { updateCakeName } ] = useModel(cakeSlice);
  return (
    <div>
      <p>{ nameOfCake }</p>
      <Button onClick={() => {updateCakeName('Medium cake')}}>updateCakeName</Button>
     <div>
  )
}

[markerikson]

I'm not sure I understand what's going on. Is there a specific question you're asking?

[li9269391]

How to write this code as TypeScript

export const useModel = (slice) => {
  const useActions = useCreateReduxFunction(slice);
  const actions = {};
  Object.keys(slice.actions).forEach((k) => {
    actions[k] = useActions(k);
  })
  const state = useAppSelector((state) => state[slice.name]);
  return [state, actions];
}

[phryneas]

Typing that correctly is going to be extremely complicated.

Generally, I recommend against the approach you are going for here.

The most important reason: is has real performance downsides:
```useAppSelector((state) => state[slice.name])will rerender your component whenever anything in a slice changes. If you component is only interested instate.sliceName.foo` and you use it like this, it will also rerender if `state.sliceName.bar` changes.
You should always subscribe to the exact values you need from state, not to a full slice. That's why we do not recommend this approach.

Apart from that, it also goes against a lot of things in the Redux style guide - at this point, you are not using Redux as a "black box to put events into" any more.