
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
@workpop/optimistic-middleware
Advanced tools
Optimistically apply actions that will be reverted on error.
npm install --save @workpop/optimistic-middleware
import { optimisticMiddleware } from '@workpop/optimistic-middleware';
Optimistic updates require your reducer to have a certain state shape.
type OptimisticStateType = {
data: any,
optimisticState: string
}
function todos(state = {}, action = {}) {
const { type, data, ...rest } = action;
switch(type) {
case 'ADD_TODO':
const todos = state.data;
return {
data: todos.concat([data.text]),
...rest
};
default:
return state;
}
}
function optimisticAddTodo(text) {
return {
simulate: {
type: 'ADD_TODO',
data: text,
},
stateKey: 'todos',
async(cb) {
return Meteor.call('addTodo', text, cb);
}
}
}
the simulate function will allow you to customize your simulations.
function optimisticAddTodo(text) {
return {
simulate(dispatch, data) {
dispatch({
type: 'ADD_TODO_ID',
data: _.get(data, '_id');
});
return dispatch({
type: 'ALL_TODOS',
data
});
}
stateKey: 'todos',
async(cb) {
return Meteor.call('addTodo', text, cb);
}
}
}
function optimisticAddTodo(text) {
return {
simulate: {
type: 'ADD_TODO',
data: text,
},
onError(dispatch, prevState, error) {
if (error.reason === 'you suck') {
dispatch({
type: 'TODO_ERROR',
data: error.reason
});
}
return dispatch({
type: 'ADD_TODO',
data: prevState
});
}
stateKey: 'todos',
async(cb) {
return Meteor.call('addTodo', text, cb);
}
}
}
function someThunk(result) {
return (dispatch) => {
someOtherAsync(result,(e, result) => {
if (e) {
console.error('ERROR');
}
dispatch({
type: 'TOGGLE_TODO_LIST',
data: result
});
});
}
}
function optimisticAddTodo(text) {
return {
simulate: {
type: 'ADD_TODO',
data: text,
},
onSuccess(dispatch, result) {
dispatch(someThunk(result));
},
stateKey: 'todos',
async(cb) {
return Meteor.call('addTodo', text, cb);
}
}
}
Let's break down our action shape:
type OptimisticActionType = {
simulate: {
type: string,
data: any
}
stateKey: !string,
async: Function,
onError: ?Function,
onSuccess: ?Function,
}
type OptimisticActionSimulateFuncType = {
simulate: Function
stateKey: !string,
async: Function,
onError: ?Function,
onSuccess: ?Function,
}
Parameters:
[simulate] - object or function to handle simulation. type/data if object, if function dispatch, data
[stateKey] - key of reducer related to action
[async] - asynchronous function intended to make mutation/remote call to the server
[onSuccess] - function to be called when async function returns *optional
[onError] - function to be called when the async function returns an error *optional
When you dispatch an OptimisticAction, the action is intercepted by Redux middleware. Immediately we save the previous state of the passed in stateKey
in case our action throws an error.
We start the dispatch process immediately executing the data change in the action to the reducer. From there, we call our asynchronous method.
If the method returns an error, we append several pieces of meta data with the error reason.
type OptimisticErrorType = {
data: any
type: string
}
Because we are reverting our state when errors occur based on the reducer state, this middleware is confined to the reducer stateKey
passed into the action. Optimistic Middleware does not currently support updates that affect multiple stateKeys.
FAQs
Optimistic Methods Middleware for Redux
The npm package @workpop/optimistic-middleware receives a total of 10 weekly downloads. As such, @workpop/optimistic-middleware popularity was classified as not popular.
We found that @workpop/optimistic-middleware demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.