This project is a Redux-toolkit wrapper used to write less code regarding classic CRUD operations.
It's mainly used inside this RN Boilerplate : thecodingmachine/react-native-boilerplate
yarn add @thecodingmachine/redux-toolkit-wrapper
import {
buildAsyncState,
buildAsyncReducers,
buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'
export default {
initialState: buildAsyncState('fetchOne'),
action: buildAsyncActions('user/fetchOne', fetchOneUserService),
reducers: buildAsyncReducers({
errorKey: 'fetchOne.error', // Optionally, if you scoped variables, you can use a key with dot notation
loadingKey: 'fetchOne.loading',
}),
}
##API
buildAsyncState
create a loading and error state. You can scope it in a key.
Parameters | Description | Type | Default |
---|---|---|---|
scope | name of the scope | string | undefined |
buildAsyncState('fetchOne')
...
buildAsyncState()
Will generate:
{
fetchOne: {
loading: false,
error: null,
}
}
...
{
loading: false,
error: null,
}
buildAsyncActions
is a wrapper of createAsyncThunk
.
Parameters | Description | Type | Default |
---|---|---|---|
actionName | the name of the action | string | undefined |
action | function to launch and await | function | () => {} |
buildAsyncActions('user/fetchOne', fetchOneUserService)
Where fetchOneUserService is an async function.
So, when the fetchOneUserService is launched the action user/fetchOne/pending
is dispatched.
When the fetchOneUserService is ended the action user/fetchOne/fulfilled
is dispatched.
When the fetchOneUserService throw an error the action user/fetchOne/rejected
is dispatched.
buildAsyncReducers
create default reducers based on CRUD logic. It creates three functions : pending, fulfilled and rejected.
pending
set theloadingKey
totrue
and theerrorKey
tonull
.fulfilled
replacesitemKey
with the payload (ifitemKey
is notnull
) and theloadingKey
tofalse
rejected
set theloadingKey
tofalse
and theerrorKey
to payload.
Parameters | Description | Type | Default |
---|---|---|---|
itemKey | the key of the item state | string | 'item' |
loadingKey | the key of the loading state | string | 'loading' |
errorKey | the key of the error state | string | 'error' |
buildAsyncReducers({
errorKey: 'fetchOne.error', // Optionally, if you scoped variables, you can use a key with dot notation
loadingKey: 'fetchOne.loading',
})
buildSlice
is a wrapper of createSlice
.
Parameters | Description | Type | Default |
---|---|---|---|
name | the name of the slice | string | undefined |
modules | array of all modules | array | [] |
sliceInitialState | initial state for all modules of the slice | object | {} |
buildSlice('user', [FetchOne], { item: {} } ).reducer
This project is released under the MIT License.
TheCodingMachine is a web and mobile agency based in Paris and Lyon, France. We are constantly looking for new developers and team leaders and we love working with freelancers. You'll find an overview of all our open source projects on our website and on Github.