Практика, вдохновленная flux¶

Несмотря на то, что Zustand - это библиотека, не имеющая собственного мнения, мы все же рекомендуем несколько паттернов. Они вдохновлены практиками, которые изначально присутствовали в Flux, а в последнее время - в Redux, поэтому если вы пришли из другой библиотеки, вы должны чувствовать себя как дома.

Тем не менее, Zustand отличается в некоторых фундаментальных аспектах, поэтому некоторая терминология может не полностью совпадать с другими библиотеками.

Рекомендуемые шаблоны¶

Единое хранилище¶

Глобальное состояние вашего приложения должно быть расположено в одном хранилище Zustand.

Если у вас большое приложение, Zustand поддерживает разбиение хранилища на фрагменты.

Используйте set / setState для обновления хранилища¶

Всегда используйте set (или setState) для обновления вашего хранилища. set (и setState) гарантирует, что описанное обновление будет корректно объединено и слушатели получат соответствующее уведомление.

Размещайте действия в хранилище¶

В Zustand состояние можно обновлять без использования диспетчерских действий и редукторов, которые есть в других библиотеках Flux. Эти действия хранилища могут быть добавлены непосредственно в хранилище, как показано ниже.

По желанию, с помощью setState они могут быть расположены вне хранилища

1
2
3
4
5
6
7

const useBoundStore = create((set) => ({
  storeSliceA: ...,
  storeSliceB: ...,
  storeSliceC: ...,
  updateX: () => set(...),
  updateY: () => set(...),
}))

Redux-подобные паттерны¶

Если вы не можете жить без Redux-подобных редукторов, вы можете определить функцию dispatch на корневом уровне хранилища:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const types = {
    increase: 'INCREASE',
    decrease: 'DECREASE',
};

const reducer = (state, { type, by = 1 }) => {
    switch (type) {
        case types.increase:
            return { grumpiness: state.grumpiness + by };
        case types.decrease:
            return { grumpiness: state.grumpiness - by };
    }
};

const useGrumpyStore = create((set) => ({
    grumpiness: 0,
    dispatch: (args) =>
        set((state) => reducer(state, args)),
}));

const dispatch = useGrumpyStore((state) => state.dispatch);
dispatch({ type: types.increase, by: 2 });

Вы также можете использовать наш redux-middleware. Он подключает ваш главный редуктор, устанавливает начальное состояние и добавляет функцию диспетчеризации к самому состоянию и ванильному api.

1
2
3

import { redux } from 'zustand/middleware';

const useReduxStore = create(redux(reducer, initialState));

Другим способом обновления хранилища могут быть функции, оборачивающие функции состояния. Они также могут обрабатывать побочные эффекты действий. Например, с помощью HTTP-вызовов. Чтобы использовать Zustand нереактивным способом, смотрите readme.

Источник — https://docs.pmnd.rs/zustand/guides/flux-inspired-practice

Комментарии