@rbxts/create-slice
v1.0.2
Published
Helpful function to easily define rodux reducers.
Downloads
7
Readme
createSlice is a helper function to simplify Rodux reducer creation.
Installation
This package is only available for Roblox TypeScript on NPM:
npm install @rbxts/create-slice
pnpm add @rbxts/create-slice
Documentation
createSlice is heavily based on the redux-toolkit's createSlice.
Warning There are two main differences that you should be aware of:
Currently, this package does not utilize an immutable library, such as Immer, to pass drafts to reducers. Therefore, it is recommended not to modify state inside reducers, but instead to return a new state object.
createSlice does not support the extraReducers property so there is currently no way for a slice to listen for a global action. Maybe I will add it
Example
Defining a slice
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) {
return { value: state.value + 1 }
},
decrement(state) {
return { value: state.value - 1 }
},
incrementByAmount(state, action: PayloadAction<number>) {
return {value: state.value + action.payload}
}
}
})
export const { actions: counterActions, reducer: counterReducer } = counterSlice
export default counterSlice
Slice exposes each individual case reducer, so you can reuse them between slices.
const timerSlice = createSlice({
name: 'timer',
initialState: { value: 0 },
reducers: {
increment: counterSlice.caseReducers.increment,
reset: () => ({ value: 0 }),
setTime: (state, action: PayloadAction<number>) => ({ value: action.payload })
}
})
export const { actions: timerActions, reducer: timerReducer } = timerSlice
export default timerSlice
Usage with Rodux
import { counterActions, counterReducer } from "shared/counter";
import { timerActions, timerReducer } from "shared/timer";
const reducer = combineReducers({
counter: counterReducer,
timer: timerReducer,
})
const store = new Rodux.Store(reducer) // { counter: { value: 0 }, timer: { value: 0 } }
// Actions will not be shared across reducers
store.dispatch(timerActions.increment()) // { counter: { value: 0 }, timer: { value: 1 } }
store.dispatch(counterActions.incrementByAmount(10)) // { counter: { value: 10 }, timer: { value: 1 } }
License
createSlice is licensed under the MIT License.