CODEWITHSUNDEEP
asynchronousreactjsredux
ntdb
ntdb

Reputation: 431

Lazy loading references from normalized Redux store

Yo! I'm using Redux and Normalizr. The API I'm working with sends down objects that look like this:

{
  name: 'Foo',
  type: 'ABCD-EFGH-IJKL-MNOP'
}

or like this

{
  name: 'Foo2',
  children: [
    'ABCD-EFGH-IJKL-MNOP',
    'QRST-UVWX-YZAB-CDEF'
  ]
}

I want to be able to asynchronously fetch those related entities (type and children) when the above objects are accessed from the state (in mapStateToProps). Unfortunately, this does not seem to mesh with the Redux way as mapStateToProps is not the right place to call actions. Is there an obvious solution to this case that I'm overlooking (other than pre-fetching all of my data)?

Upvotes: 1

Views: 810

Answers (1)

pierrepinard_2
pierrepinard_2

Reputation: 1426

Not sure that I have correctly understood your use-case, but if you want to fetch data, one simple common way is to trigger it from a React component:

var Component = React.createClass({
    componentDidMount: function() {
        if (!this.props.myObject) {
            dispatch(actions.loadObject(this.props.myObjectId));
        }
    },

    render: function() {
        const heading = this.props.myObject ?
            'My object name is ' + this.props.myObject.name
            : 'No object loaded';
        return (
            <div>
                {heading}
            </div>
        );
    },
});

Given the "myObjectId" prop, the component triggers the "myObject" fetching after mounting.

Another common way would be to fetch the data, if it's not already here, from a Redux async action creator (see Redux's doc for more details about this pattern):

// sync action creator:
const FETCH_OBJECT_SUCCESS = 'FETCH_OBJECT_SUCCESS';
function fetchObjectSuccess(objectId, myObject) {
    return {
        type: FETCH_OBJECT_SUCCESS,
        objectId,
        myObject,
    };
}

// async action creator:
function fetchObject(objectId) {
    return (dispatch, getState) => {
        const currentAppState = getState();
        if (!currentAppState.allObjects[objectId]) {
            // fetches the object if not already present in app state:
            return fetch('some_url_.../' + objectId)
                .then(myObject => (
                    dispatch(fetchObjectSuccess(objectId, myObject))
                ));
        } else {
            return Promise.resolve();  // nothing to wait for
        }
    };
}

Upvotes: 2

Related Questions