Как организовать срезы в Redux Toolkit?

Обычно рекомендуется иметь отдельные срезы для разных частей штата, особенно если эти разные части имеют разные проблемы или если они обновляются разными действиями. Наличие отдельных срезов для разных частей состояния может помочь сделать код более организованным и понятным. В этом случае иметь один фрагмент для oneOffer, другой для allOffers и один для categories будет иметь смысл, поскольку они имеют разную структуру данных и обновляются разными действиями. Таким образом, вы можете сохранить состояние и редукторы, которые манипулируют этим состоянием, организованными и простыми для понимания.

// oneOffer slice
const oneOfferSlice = createSlice({
  name: 'oneOffer',
  initialState: {},
  reducers: {
    setOneOffer: (state, action) => {
      state = action.payload;
    }
  }
});

// allOffers slice
const allOffersSlice = createSlice({
  name: 'allOffers',
  initialState: [],
  reducers: {
    setAllOffers: (state, action) => {
      state = action.payload;
    }
  }
});

// categories slice
const categoriesSlice = createSlice({
  name: 'categories',
  initialState: [],
  reducers: {
    setCategories: (state, action) => {
      state = action.payload;
    }
  }
});

В этом примере каждый слайс имеет уникальное имя, начальное состояние и одну функцию-редуктор, которую можно использовать для обновления его состояния. Фрагмент oneOffer имеет начальное состояние {} и действие setOneOffer, которое обновляет состояние с помощью полезной нагрузки. Срез allOffers имеет начальное состояние [] и действие setAllOffers, которое обновляет состояние с помощью полезной нагрузки. Наконец, срез категорий имеет начальное состояние [] и действие setCategories, которое обновляет состояние с помощью полезной нагрузки.

Затем вам нужно будет объединить эти фрагменты с помощью функции createAsyncThunk или каким-либо другим способом передать данные из вызовов API в состояния.

На самом деле, здесь нет правильного способа использовать ваш слайс. Оба метода в порядке. Все зависит от того, как ВЫ хотите его организовать и как вы будете получать к нему доступ в своем приложении. Но что более важно, при написании простого в обслуживании приложения.

Я лично разделяю фрагменты в зависимости от базы данных. Например, если у меня есть таблица user и offer, я создам 2 среза.

Для вашего примера я бы объединил свои редукторы следующим образом:

const reducer = combineReducers({
  offers: offers.reducer,
  categories: categories.reducer,
})

Затем я могу создать const offers = useSelector... и const categories = useSelector...

С помощью этого метода вы можете легко писать поддерживаемый и легко читаемый код.

Согласно документации Redux,

По мере того, как ваше приложение становится все более сложным, вы захотите разделить функцию сокращения на отдельные функции, каждая из которых будет управлять независимыми частями состояния.

Надеюсь, мой совет поможет.

Я реализовал то же самое, что и вы, в одном из моих проектов, и это работает нормально. Так что не путайте с реализацией. Для справки,

import { createSlice } from '@reduxjs/toolkit';

export const initialState = {
  loading: false,
  userInfo: {
    email: '',
    password: '',
    challengeName: '',
    code: '',
    firstName:"Guest"
  },
  userRoles: {},
  error: '',
};

const loginSlice = createSlice({
  name: 'login',
  initialState,
  reducers: {
    loginLoading: (state, action) => {
      if (action.payload !== undefined) {
        state.loading = action.payload;
      } else {
        state.loading = true;
      }
    },
    loginError: (state, action) => {
      state.error = action.payload;
    },
    loginUserInfo: (state, action) => {
      state.loading = false;
      state.userInfo = action.payload;
    },
    loginReset: (state) => {
      state.userInfo = initialState.userInfo;
      state.error = initialState.error;
    },
    SetUserRoles: (state, action) => {
      state.userRoles = action.payload;
    }
  },
});

const { actions, reducer } = loginSlice;
export const {
  loginLoading, loginError,
  loginUserInfo, loginReset, SetUserRoles
} = actions;
export default reducer;