Пункт 1. Концепция слайсов и разделение на слайсы целого стора Если глянуть в доку по zustand, то стора (хранилище состояний) создается в нем таким образом : Пример на zustand: type State = { count: number }
type Actions = { increment: (qty: number) => void decrement: (qty: number) => void }
const useCountStore = create((set) => ({ count: 0, increment: (qty: number) => set((state) => ({ count: state.count + qty })), decrement: (qty: number) => set((state) => ({ count: state.count - qty })), }))
Здесь видно, что нет четкого разделения на редьюсеры, функция state передается как атрибут при создании стора, не нужно явно прописывать initialState: {count: 0} – можно обойтись count: 0.
Соединяются слайсы через такой синтаксис: (слайс – отдельный элемент стора. Чаще всего каждый слайс хранится в отдельном файле для улучшения читабельности и сопровождения). Пример на zustand: create((...a) => ({ ...createFirstSlice(...a), ...createSecondSlice(...a), }))
ИТАК, ЧТОБЫ ПЕРЕНЕСТИ КОД С ZUSTAND НА REDUX, НЕОБХОДИМО: Соединить слайсы по редьюсерам и добавить в reducer к сторе: Redux: const coffeeReducer = combineSlices(cartSlice, listSlice, { cart: cartSlice.reducer, list: listSlice.reducer, })
configureStore({ reducer: coffeeReducer,…..}) Создать слайсы через createSlice: Пример на redux export const cartSlice = createSlice({ name: "cart", initialState, extraReducers: (builder) => { ... }, reducers: {...} })
Создание слайса на zustand очень похож на создание сторы, так что можно быстро переделать стору на слайсы Продолжение следует