我是Redux RTK的新手,我有点困惑。有没有像React的useState中那样的setState使用方法?
例如,我有这样的代码,我从一个API中获取一些数据,然后创建一些extraReducers
。
但是我很疑惑,我有一个handleChange
的下拉菜单,但是到目前为止我还没有弄清楚如何setState onChange
:
export const getPlayers = createAsyncThunk<IPlayerProps[]>('players/getPlayers', async (_, _thunkApi) => {
try {
const response = await axios.get(
'https://6360055fca0fe3c21aaacc04.mockapi.io/player'
);
return response.data;
} catch (error) {
return _thunkApi.rejectWithValue(error);
}
下面是切片器:
export const playerSlice = createSlice({
name: 'players',
initialState,
reducers: {
setPlayers: (state, action: PayloadAction<IPlayerProps[]>) => {
state.players = action.payload;
}
},
extraReducers: (builder) => {
builder.addCase(getPlayers.pending, (state) => {
state.loading = true;
});
builder.addCase(getPlayers.fulfilled, (state, action) => {
state.players = action.payload;
state.loading = false;
});
builder.addCase(getPlayers.rejected, (state, action) => {
state.loading = false;
state.errors = action.payload;
})
}
});
export default playerSlice.reducer;
export const { setPlayers } = playerSlice.actions;
这里我用target的值做一个简单的setState
:
const handleChange = (e: SelectChangeEvent<string>) => {
setState(e.target.value);
};
任何帮助都将不胜感激!:)
1条答案
按热度按时间lvmkulzt1#
如果我正确理解了您的问题,useState用于在同一文件中本地保存或更新数据,并且保存的数据在项目中无法全局访问。
但是使用redux,所有项目都可以访问共享数据存储。
因此,Redux的工作方式与react的useState钩子不同。
因此,要在redux中更新、更改、删除或添加值,我们使用dispatch调用操作并强制redux状态更新。
例如:
假设您在redux中有一个名为getPlayers的操作,因此当您调用此操作时,它应该基于特定类型返回数据,并在redux reducer状态下保护它。
因此,要调用该操作,您应该使用
import useDispatch
并使用它,它将触发redux操作,并且您应该使用import useSelector
,它将从redux获取数据(换句话说,每当您在redux中触发一个操作并更新redux状态时,useSelector将自动更改您正在使用的文件中的数据,因此行为将与setState相同):最后,如果您希望在单击时更新变量,则应该在redux中创建一个操作,该操作将更新redux状态下的变量,可以使用dispatch调用该操作,并将变量更新为useState行为。
我知道这听起来可能很复杂,但是一旦你得到了架构,redux在很多情况下都是非常有帮助的,祝你好运!如果你需要什么或者有任何问题,请告诉我。
这里有一篇简短的文章,可以帮助您了解redux good architecture(Best Redux architecture explained in 5 minutes