Redux Tween API provides three functions, tweenReducer, tweenActionCreators and tweenStore.
Wraps reducer to apply tweened states.
- reducer is an ordinary reducer.
Returns reducer enhanced to process both your actions and Redux Tween inner actions. This reducer would properly deal with all your actions, tweened or intermediate.
Given an action creators dictionary actionCreators, setup object transitionSetup and a filtering function actionFilter returns a readyToDispatch function.
All arguments are optional, but without actionCreators the result would be useless.
-
actionCreators is an ordinary action creators dictionary i.e. an object which values are functions, returning Redux action.
-
transitionSetup is an object with three optional keys:
- ease to specify easing function (pass any one from d3-ease or write your own);
- duration to specify transition duration in milliseconds;
- delay to specify transition delay in milliseconds.
duration and delay values can be numeric or a calculate function.
calculate({action, state, nextState})
Given an object with action, state and nextState returns a numeric value representing transition parameter, duration or delay.
This approach allows you to implement constant speed transitions, calculating desired duration based on state difference.
- actionFilter(*action) is a function. Given original action, created by one of your action creators, returns true or false. True result enabled tweening for this action, false stands for immediate state application. If no actionFilter is provided, every action will be tweened.
Returns readyToDispatch(dispatch) function which, given a dispatch function, returns wrappedActionCreators — function dictionary, wrapping actionCreators structure the same way as bindActionCreators does.
Call this function manually within mapDispatchToProps binder or just pass it as a second argument of react-redux's connect().
With tweenActionCreators you don't call bindActionCreators manually.
- transitionSetup is described above.
- actionFilter is described above.
Returns StoreEnhancer, which should be passed as last argument of redux's createStore() or composed with other enhancers such as middlewares (as in example).