duxkit
An unofficial, simple, toolkit for organising actions and reducers for Redux
Inspired by the official redux-toolkit.
Installation
npm or yarn
Duxkit is available as a package on NPM for use with a module bundler or in a Node application:
# NPM npm i duxkit # Yarn yarn add duxkit
Copy 'n Paste
A goal of duxkit is to be simple enough to be able to just copy and paste the source code here into your own source. createAction
, createReducer
, and miniStore
have no dependencies on other parts of the code, so they can be dropped into your source without a worry. createAsyncAction
[1] and createSlice
[2] rely on createAction
[1,2] and createReducer
[2] so if you want to use those you'll have to copy their dependencies too.
Usage
createAction()
createAction(type, customAction?)
const actionCreator = // { type: 'myAction', payload: 'myPayload' } const customActionCreator = // { type: 'myCustom', payload: 'cba' }
createAsyncAction()
createAsyncAction(type, asyncAction)
const actionCreator = // { type: 'fetchUser/pending' }// { type: 'fetchUser/fulfilled', payload: { id: 123, name: 'Joe' } } // { type: 'fetchUser/pending' }// { type: 'fetchUser/rejected', payload: Error{ message: 'demo error' } }
createAsyncAction()
returns a thunk, not an action. Use with store.dispatch()
.
createReducer()
createReducer(initialState, actionHandlers)
const decr = const initialState = 0 const actionHandlers = state + 1 decr: state - 1 const reducer = // 1 // 4
createSlice()
createSlice({ name, initialState, reducers?, extraReducers? })
const setAsync = const counter = // { name: counter, actions: { incr(), decr() }, reducer() } counteractions// { type: 'counter/incr' } counteractions// { type: 'counter/decr' } counter// 1 counter// 42
miniStore()
miniStore(reducer)
const counter = // { name: counter, actions: { incr(), decr() }, reducer() } const store = store// 0 const unsub = store store// console.log: 1 store// console.log: 0 store// console.log not called
Differences to Redux Toolkit
Status | Name | Description |
---|---|---|
removed | createAsyncThunk() |
renamed to createAsyncAction() |
added | createAsyncAction() |
renamed from createAsyncThunk() |
added | miniStore() |
simple redux store with thunk support |
changed | createReducer() |
removed immer |
removed | configureStore() |
|
removed | createEntityAdapter() |
|
removed | createSelector |
not re-exported |