Helper library for Redux Toolkit to perform optimistic updates.
npm install redux-toolkit-optimistichttps://www.npmjs.com/package/redux-toolkit-optimistic
Simple helper library for use with
Redux Toolkit. MUST be used in conjunction with
createEntityAdapter as
well as createSlice OR
createReducer.
- Allows for updateOne or updateMany optimistic updates.
- Works especially well the pending and rejected states of
createAsyncThunk.
npm install -S redux-toolkit-optimistic
yarn add redux-toolkit-optimistic
Example Redux code:
``js
import {
createAsyncThunk,
createEntityAdapter,
createSlice,
} from '@reduxjs/toolkit';
import {
performOptimisticUpdate,
revertOptimisticUpdate,
} from 'redux-toolkit-optimistic';
export const myFunction = createAsyncThunk(
'mySlice/myFunction',
async ({ id, changes }) => {
await persistChangesToDb(id, changes);
},
);
const myAdapter = createEntityAdapter();
const mySlice = createSlice({
name: 'mySlice',
initialState: myAdapter.getInitialState(),
reducers: {},
extraReducers: {
[myFunction.pending]: (state, action) =>
performOptimisticUpdate(state, myAdapter, action.meta.arg),
[myFunction.rejected]: (state, action) =>
revertOptimisticUpdate(state, myAdapter, action.meta.arg.id),
},
});
const reducer = spreadsSlice.reducer;
export default reducer;
`
And usage in React:
`js
import { myFunction } from '../path/to/state';
dispatch(
myFunction({
id: 'someId',
changes: { someKey: 'new value' },
}),
);
``
MIT