react-transition-group-redux v0.2.0

react-transition-group-redux

Facilities for managing transition states in Redux when interfacing with react-transition-group.

API

actionTypes

The included actionTypes are named identically to the different transition states that a <Transition> component can have in it's lifecycle. They include ENTER, ENTERING, ENTERED, EXIT, EXITING, EXITED.

• Note that ENTER and EXIT actually mean that the component will enter or exit. The naming is to remain consistent with what is found in react-transition-group, but it is important to restate the exact semantics.

actionsCreator(transitionId: string)

The actionsCreator function returns an object mapping all of the action creators you need for interfacing with react-transition-group. There is an action creator for each action type, and the shape of the payload includes the transitionId and any additional arguments you pass through the action represented as an array. The shape of the payload is shown below:

// @flow

type ActionPayload = {
  transitionId: string,
  arguments: any[],
}

reducer(state: Object, action: FSA)

This library also includes a reducer which will maintains a mapping of transitionId to it's current transition state. An example of what this state may look like is shown below:

{
  'fade-transition-1': 'ENTERED',
  'fade-transition-2': 'ENTERING',
  'fade-transition-3': 'ENTER',
  'scale-transition-1': 'EXITING',
  'scale-transition-2': 'EXITED',
  'some-crazy-transition': 'EXIT',
}