Redux toolkit createSlice not working as expected (state is not modified thought action seem to be fired) - redux-toolkit

Question

I am new to Redux toolkit. I have a working app in which would like to implement it in place of existing "regular" reducer.
import { createSlice, PayloadAction } from "#reduxjs/toolkit";
import { SelectedMinifig } from "types";
const initialState = {} as SelectedMinifig;
const selectedMinifigSlice = createSlice({
name: "selectedMinifigX",
initialState,
reducers: {
setSelectedMinifigX(state, action: PayloadAction<SelectedMinifig>) {
state = action.payload;
console.log("state and action payload from slice", state, action.payload);
},
},
});
export default selectedMinifigSlice.reducer;
export const { setSelectedMinifigX } = selectedMinifigSlice.actions;
Please note that in the code I use postfix "X" to differentiate new names from existing ones.
From the above slice, exports are consumed like this:
import selectedMinifigReducer from "reduxware/reducers/selectedMinifigSlice";
import { partsApi } from "../api/partsApi";
const rootReducer = combineReducers({
fetch: fetchReducer,
selected: selectedReducer,
teasers: teasersReducer,
selectedMinifigX: selectedMinifigReducer,
[partsApi.reducerPath]: partsApi.reducer,
});
Above I consume reducer, and with two files below I consume action (the latest file is my usual workaround not to useDispatch in components directly):
index.ts:
export { setSelectedMinifigX } from "reduxware/reducers/selectedMinifigSlice";
useDispatchAction.ts
import { useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators } from "reduxware";
const useDispatchAction = () => {
const dispatch = useDispatch();
return bindActionCreators(actionCreators, dispatch);
};
export default useDispatchAction;
The actions are fired like this (the new action is setSelectedMinifigX(selected), the old is setSelectedMinifig(selected), both with the same argument) :
onClick={e => {
e.stopPropagation();
setSelectedMinifig(selected);
setSelectedMinifigX(selected);
history(Paths.order);
}}
And in the moment of firing action, I really receive in console comment "state and action payload from slice " with expected content. That is why I claim action is actually fired.
The problem is that when I reach for state it is still empty object like initial state.
I have a component that is linked with state like below:
const mapStateToProps = (state: RootStateType) => ({
selectedMinifig: state.selected.selectedMinifig,
selectedMinifigX: state.selectedMinifigX,
});
and within this component, selectedMinifigX is an empty object. What is wrong here?

Answer 1

Hmm some of this looks a little foreign / extra to me.
Your reducer looks correct. Inside of your React component try to do something like this:
const SomeComponent = () => {
const dispatch = useDispatch()
const someHandlerFn = (e) => {
e.stopPropagation();
dispatch(setSelectedMinifigX(selected))
history(Paths.order);
}
return <button onClick={someHandlerFn}>Test Me</button>
}
I'm not sure if bindActionCreators is still valid redux. Was something I use to do before redux toolkit when using class based components. You should see your reducer fire inside of your reducer file.
The useDispatchAction.ts seems like extra stuff you don't need.