Can I make a multiple createSlice at the createSlice with addSlice and subSlice?

Viewed 49

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:
0 Answers
Related