Package Exports
- redux-optimist
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-optimist) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
redux-optimist
Optimistically apply actions that can be later commited or reverted.
Installation
npm install redux-optimistUsage
Step 1: Wrap your top level reducer in redux-optimist
reducers/todos.js
export default function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text]);
default:
return state;
}
}reducers/status.js
export default function status(state = {writing: false, error: null}, action) {
switch (action.type) {
case 'ADD_TODO':
return {writing: true, error: null};
case 'ADD_TODO_COMPLETE':
return {writing: false, error: null};
case 'ADD_TODO_FAILED':
return {writing: false, error: action.error};
default:
return state;
}
}reducers/index.js
import optimist from 'redux-optimist';
import { combineReducers } from 'redux';
import todos from './todos';
import status from './status';
export default optimist(combineReducers({
todos,
status
}));As long as your top-level reducer returns a plain object, you can use optimist. You don't
have to use Redux.combineReducers.
Step 2: Mark your optimistic actions with the optimist key
middleware/api.js
import {BEGIN, COMMIT, REVERT} from 'redux-optimist';
import request from 'then-request';
let nextTransactionID = 0;
export default function (store) {
return next => action => {
if (action.type !== 'ADD_TODO') {
return next(action);
}
let transactionID = nextTransactionID++;
next({
type: 'ADD_TODO',
text: action.text,
optimist: {type: BEGIN, id: transactionID}
});
request('POST', '/add_todo', {text: action.text}).getBody().done(
res => next({
type: 'ADD_TODO_COMPLETE',
text: action.text,
response: res,
optimist: {type: COMMIT, id: transactionID}
}),
err => next({
type: 'ADD_TODO_FAILED',
text: action.text,
error: err,
optimist: {type: REVERT, id: transactionID}
})
);
}
};Note how we always follow up by either COMMITing the transaction or REVERTing it. If you do neither, you will get a memory leak. Also note that we use a serialisable transactionID such as a number. These should always be unique accross the entire system.
Step 3:
Using this, we can safely fire off ADD_TODO actions in the knowledge that the UI will update optimisticly, but will revert if the write to the server fails.
App.js
import { createStore, applyMiddleware } from 'redux';
import api from './middleware/api';
import reducer from './reducers';
// Note: passing middleware as the last argument to createStore requires redux@>=3.1.0
let store = createStore(reducer, applyMiddleware(api));
console.log(store.getState());
// {
// optimist: {...},
// todos: [],
// status: {writing: false, error: null}
// }
store.dispatch({
type: 'ADD_TODO',
text: 'Use Redux'
});
console.log(store.getState());
// {
// optimist: {...},
// todos: ['Use Redux'],
// status: {writing: true, error: null}
// }
// You can apply other actions here and their updates won't get lost
// even if the original ADD_TODO action gets reverted.
// Some time later...
console.log(store.getState());
// either
// {
// optimist: {...},
// todos: ['Use Redux'],
// status: {writing: false, error: null}
// }
// or
// {
// optimist: {...},
// todos: [],
// status: {writing: false, error: Error}
// }License
MIT