如何在Redux Toolkit中组织切片?

Question

我正在阅读如何使用createAsyncThunk，我发现我的切片没有很好地组织。

有offer。用户可以看到所有的优惠，他们也可以创建一个，看到一个，有优惠类别等。

对我来说，一个切片是"主题/类别";这样的:

// Axios request to get all offers, post one, get categories offers, etc..
const offerSlice = createSlice({
name: 'offer',
initialState: {
allOffers: [],
OtherOffers : [],
oneOffers: {},
categoriesOffers: []
},
reducers: {
setAllOffers: (state, action) => {
state.allOffers = action.payload;
},
setOneOffer: (state, action) => {
state.oneOffers = action.payload;
},
setCategories: (state, action) => {
state.categoriesOffers = action.payload;
},
otherOffers: (state, action) => {
state.OtherOffers = action.payload;
},
},
});

所以我知道，我读了一些StackOverflow的帖子，我看到一个切片更像是"一个主题"。

例如，在这里，最好只有一个片用于oneOffer，一个用于allooffers，一个用于categories…

所以，我迷路了。从redux-toolkit中使用slice的正确方法是什么?

Answer 1

通常建议对状态的不同部分使用单独的切片，特别是如果这些不同的部分有不同的关注点，或者如果它们由不同的操作更新。对状态的不同部分进行单独的切片可以帮助保持代码更有组织，更容易理解。在这种情况下，oneOffer有一个切片，allOffers有一个切片，categories有一个切片，因为它们是不同的数据结构，并通过不同的操作更新。通过这种方式，您可以保持状态和操作该状态的reducer有组织且易于推理。

// 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;
}
}
});

在这个例子中，每个切片都有一个唯一的名称、一个初始状态和一个可以用来更新其状态的reducer函数。oneOffer片有一个初始状态{}和一个动作setOneOffer，它用负载更新状态。allOffers片的初始状态为[]，操作setAllOffers使用负载更新状态。最后，categories片具有初始状态[]和操作setCategories，该操作使用负载更新状态。

然后，您需要使用createAsyncThunk函数或其他方式组合这些片，以将数据从api调用传递到状态。

Answer 2

实际上，这里没有使用切片的正确方法。两种方法都可以。这完全取决于你想如何组织它，以及你将如何在你的应用程序中访问它。但更重要的是，写一个易于维护的应用程序。

我个人根据数据库分离片。例如，如果我有一个user和一个offer表，我将创建2个片。

以你为例，我会这样组合我的减速机:

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

然后，我可以创建一个const offers = useSelector...和一个const categories = useSelector...

使用此方法，您可以轻松编写易于维护和阅读的代码。

根据Redux文档，

当你的应用程序变得越来越复杂时，你会想把你的reduce函数拆分成单独的函数，每个函数管理状态的独立部分。

希望我的建议对你有帮助。

Answer 3

我已经实现了与您在我的一个项目中所做的相同，并且工作良好。所以，请不要混淆它的实现。供参考,

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;