Is there a setState in Redux RTK? - reactjs

Question

I am new to Redux RTK and I am kinda confused. Is there a setState using method like in useState of React?
For example I have this code where I fetch some data from an API, and after I create some extraReducers.
But I am wondering, I have a handleChange of a dropdown, but so far I have not figured out how to 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);
}
Here is the Slicer:
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;
And here is where I do a simple setState with target's value:
const handleChange = (e: SelectChangeEvent<string>) => {
setState(e.target.value);
};
Any help would be appreciated! :)

Answer 1

If I understood your question properly, useState is used to save or update data locally in the same file and the data saved won't be accessible globally in the project.
but using redux, All the project will have access to a shared data storage.
Therefore, Redux work in a different way than useState hook of react.
Thus, to update, change, remove or add values in redux, we use dispatch to call the action and force the redux state update.
for example:
let's say you have an action called getPlayers in redux, so the this action when you call it, it should return data based on a specific type and safe it in the redux reducer state.
So, to call that action you should import useDispatch and use it which will fire the redux action, and you should import useSelector which get the data from redux (in other words, whenever you fire an action in redux and it updates redux state, the useSelector will automatically change the data in the file you are using, so the behavior will be the same as setState):
import { useDispatch } from 'react-redux';
//to get the data from redux
import { useSelector } from 'react-redux';
...
//to fire actions in redux which will force update the redux state (selectors)
const dispatch =useDispatch();
useEffect(()=>{
//this will call the action
dispatch(getPlayers());
},[]);
// when you dispatch(getPlayers()) and the new data is fetched, the players in redux will automatically update.
const players= useSelector((state) => state.players);
...
To conclude, if you want to update a variable on click, you should create an action in redux that will update a variable in the state of redux, which can be called using dispatch and update the variable as a useState behavior.
I know this may sound complicated but once you get the architecture, redux can be very helpful in many scenarios, good luck! and let me know if you need anything or if you have any question.
Here is a quick article that should help you understand redux good architecture (Best Redux architecture explained in 5 minutes