我使用的是React,我有一个Redux-Toolkit(RTK)状态切片,它是用localStorage持久化的(我使用的是redux-persist
库)。简单来说就是这样:
const initLocations = []
const locationsPersistentSlice = createSlice({
{
name: "locations",
initLocations,
reducers: {
addLocation(prevState, action) {
// adding new location to store
},
clearLocations() {
return []
}
}
})
它能同步工作而且非常好。
但是,我想添加第二个切片locationInfoSlice
,它应该在addLocation()
操作被调度时使用列表中的最后一个位置获取数据。
我怎么才能做到这一点?我考虑过extraReducers
或asyncThunk
,但没有得到正确的。
1条答案
按热度按时间krugob8w1#
但是,我想添加第二个切片
locationInfoSlice
,它应该在addLocation()
操作被调度时获取数据,使用列表中的最后一个位置。如果我正确理解了你的帖子/问题,你实际上想派遣 * 一些 * 单一的行动,并做以下事情:
state.locations
数组中存储位置state.locations
数组中的最后一个位置获取一些数据。我怎么才能做到这一点?我考虑过
extraReducers
或asyncThunk
,但没有得到正确的。您可能需要使用两者。单独使用
extraReducers
是不行的,因为reducer函数是没有副作用的纯同步函数,例如:它们不能异步获取数据。我的建议是创建一个Thunk,它调度addLocation
操作来更新state.locations
的状态,并且还进行所需的数据获取,该数据获取可以返回一个值,该值将用于更新extraReducers
中locationInfoSlice
的状态。在UI中,它现在将调度
addLocationAsync
操作,而不是直接调度addLocation
操作。