So I was just wondering to create a multiple list of crud by adding a multiple list in a button.
So basically for example I have 4 players and 4 players have each group they called red-blue-yellow-green... and they have teammates something like that...or maybe I can increase it into thousand or billion times.
so the code should be like this
import { createSlice } from '@reduxjs/toolkit'
let initialValues = [{
id:1,
name:"Johnny",
username:"Bravo"
}]
let crudSlice = createSlice({
name:"cruds",
initialState:{ value: initialValues},
reducers:{
addPlayer:( state, action) => {
state.value.push(action.payload)
}
}
})
const initialCrud = [{
id:1,
name:"Johnny",
crudSlicer:crudSlice,
crudReducer:crudSlice.reducer,
crudActions: crudSlice.actions.addPlayer,
}]
export const usersSlice = createSlice({
name:"groups",
initialState:{ value: initialCrud },
reducers:{
multipleUser: ( state, action) => {
state.value.push(action.payload)
},
subtractUser: ( state,action ) => {
state.value = state.value.filter(
(group) => group.id !== action.payload.id
)
},
...
}
})
export const {
// addUser,
// deleteUser,
// updateUser,
multipleUser,
subtractUser
} = usersSlice.actions;
export default usersSlice.reducer
but since I can't export the reducers and also the initialState of each group so how do I do it? Although it works by just adding new createSlice but I don't know how to change it without exporting.
Here is the sample of how I will create a new createSlice
const crudList = useSelector((state) => state.users.value)
let crudSlice = createSlice({
name:"cruds",
initialState:{ value : [{
id:1,
name:"Johnny",
username:"Bravo"
}] },
reducers:{
addPlayer:(state,action) => {
state.value.push(action.payload)
}
}
})
....
<button onClick={() => {
dispatch(multipleUser({
id:crudList.length + 1,
name:`Johnny${crudList.length + 1}`,
crudSlicer:crudSlice,
crudReducer:crudSlice.reducer,
crudActions: crudSlice.actions.addPlayer,
}))
}}>
Add Crud
</button>
So is there any possible way I can get the states of the initialstate of each group players in crud without exporting? or anything else? I know this kinda stupid to do but I kinda like the idea of it.
Anyways I kinda get this error on it..I don't understand what is non-serializable thing when I clicked the button.
A non-serializable value was detected in an action, in the path: `payload.crudSlicer.reducer`. Value: ƒ (state, action) {
if (!_reducer) _reducer = buildReducer();
return _reducer(state, action);
}
Take a look at the logic that dispatched this action: