React-Redux componentWillReceiveProps not triggered using api data

Question

I'm not sure if this is the correct way to do things, or if it's even possible, therefore my question here.

I'm using react-redux, redux-thunk, json-server (for dummy data) and typescript in my project. With 1 api call I update the 'data' reducer with all the data for my application. This data is used together with other reducers through combineReducers: Redux tree

What I'd like to do is map data.labels as prop into my component. Once the whole api call finishes, and data.labels is therefore filled, I would like to show this data to my front-end. I have however noticed that the componentWillReceiveProps is not triggered at all when my data api call is finished. It does update if I attach the whole 'data' prop to my component, instead of 'data.labels'.

Reducer:

    case Actions.RECEIVE:
        return {
            ...state,
            labels: action.payload.labels,
            defaultLinks: action.payload.defaultLinks,
            customLinks: action.payload.customLinks
        };

Component:

function mapStateToProps(state: any) {
return {
    labels: state.data.labels, // This will not trigger componentWillReceiveProps

function mapStateToProps(state: any) {
return {
    data: state.data, // This will trigger componentWillReceiveProps

Any tips on how to get this to work without injecting the whole data object as prop?

Edit

In the case of using te full 'data', I get an empty array of labels when logging data.labels in componentWillReceiveProps before the data has been fetched. After the data has been successfully fetched, my log shows an array of x amount of labels.

Below are the interfaces I use: Data interface (structure inside redux store, with 'data' as parent):

interface Data {
  labels: Label[];
  defaultLinks: DefaultLink[];
  customLinks: CustomLink[];
  request: boolean;
  failure: boolean;
}

Props interface used in my component:

interface Props {
  labels: Label[];
  ...; // Other stuff
}

You may be looking for the selector pattern: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 often used in combination with reselect: github.com/reactjs/reselect#reselect — brub
– brub, Commented Dec 28, 2017 at 11:52
I think your dispatched label data is same with previous data. Therefore, componentWillReceiveProps doesn't trigger. — metinata
– metinata, Commented Dec 28, 2017 at 12:04
@brub thanks for that! Seems like an interesting idea so I'll give it a shot! — Eadwine
– Eadwine, Commented Dec 28, 2017 at 13:22
@metinata Updated my post, a log shows that there is a difference in data in the before and after, so the method should be triggered I think? — Eadwine
– Eadwine, Commented Dec 28, 2017 at 13:25

brub · Accepted Answer · 2017-12-28 14:58:00Z

2

You may be looking for the selector pattern: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 often used in combination with reselect: github.com/reactjs/reselect#reselect

The primary advantage is you decouple the shape of your state from the shape of your props.

answered Dec 28, 2017 at 14:58

brub

1,1531 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Redux componentWillReceiveProps not triggered using api data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related