React Redux LifeCycles

Store lifeCycle callbacks (will be extended in future):

1storeDidUpdate(storeState: YourStoreStateInterface): void {}
2storeDidUpdateState(currentStoreState: YourStoreStateInterface, prevStoreState: YourStoreStateInterface): void {}

Install

Via npm

1npm install --save react-redux-lifecycles

Usage

As decorator:

1import * as React from "react";
2
3import { connect } from "react-redux";
4import { withLifeCycles } from "react-redux-lifecycles";
5
6@withLifeCycles()
7@connect(mapStateToProps, mapDispatchToProps, mergeOptions, { withRef: true })
8export class Component extends React.Component {}

As HOC:

1import * as React from "react";
2
3import { connect } from "react-redux";
4import { withLifeCycles } from "react-redux-lifecycles";
5
6class Component extends React.Component {}
7
8export default withLifeCycles()(connect(mapStateToProps, mapDispatchToProps, mergeOptions, { withRef: true })(Component));

Note: withLifeCycles apply as argument only connected component

Note: You must pass { withRef: true } argument to connect method

Methods

storeDidUpdate

Will called after store received new state (reducer has been executed).

To get access to storeDidUpdate method just use withLifeCycles() method without any arguments.

storeDidUpdateState

Will called after store received new specific state (reducer has been executed).

To get access to storeDidUpdateState method just use withLifeCycles() with array of strings as argument. For example:

1/**
2storeState: {
3    field1: {
4        level1: {
5            level2: true
6        },
7        subLevel: false
8    },
9    field2: {
10        level1: false
11    },
12    loading: false
13}
14**/
15
16// storeDidUpdateState will be executed if one of the passed arguments changed
17@withLifeCycles(["field1.level1.level2", "loading"])
18@connect(mapStateToProps, mapDispatchToProps, mergeOptions, { withRef: true })
19export class Component extends React.Component {
20    storeDidUpdateState(currentState) {
21        /**
22         if reducer change only 'field2' or 'field1.subLevel' value, 'storeDidUpdateState' does not be executed
23         if reducer change 'loading' or 'field1.level1.level2' value, 'storeDidUpdateState' will be executed
24        **/
25    }
26
27    storeDidUpdate(currentStoreState, prevStoreState) {
28        // Always executing after store received new state
29    }
30}