Selectors do not hot reload

[slorber]

With webpack hot reloading, when fixing a bug inside a selector, the React view does not reflect the change after hot reloading.

Any reason for this?

Maybe the memoized values should be trashed on reload?
Or maybe it's react-redux connect that should reconnect on selectors updates?

[gaearon]

My guess is they will hot reload it you use React Hot Loader but not React Transform because gaearon/babel-plugin-react-transform#26. This is not specific to selectors at all: the bigger issue is we don’t update the wrapper components currently.

[slorber]

@gaearon thanks for the link will check it.

But I'm currently using React Hot Loader and not a babel transform :)

[gaearon]

Can you set up a small project reproducing the issue?

[slorber]

Hmmm thinking about it, this probably happens because I don't use Reselect with Redux so I guess it may work better if replaceReducer of redux is triggered and the selectors are in the same file as the reducers?

I'll have to investigate a bit more but I don't have time right now.

This is probably not really helpful but my selector that could not hot reload was:

exports.sortedFolderTagsSelector = createSelector(
  [
    exports.folderTagsSelector,
    AppCommonStore.selectedTagsSelector
  ],
  (folderTags,selectedTags) => {
    if ( folderTags ) {
      const sortedTags = _.orderBy(
        folderTags.tags,
        [tag => _.includes(selectedTags,tag.value),"count","value"],
        ["desc","desc","asc"]
      );
      return {
        ...folderTags,
        tags: sortedTags
      }
    }
  }
);

[gaearon]

It has more to do with where updates bubble then what selector is like. If you import selectors from components, React Hot Loader should pick up the updates. If it doesn’t, please post a project reproing this so I can look.

[ellbee]

@Slober I'm going to close this for now, if you find the time to create a reproducible test case please feel free to re-open.

[gaearon]

You might be interested in reduxjs/redux#1455.

[slorber]

thanks will check that

[gaearon]

This is fixed in React Hot Loader 3.
It is built with lessons learned from both React Hot Loader and React Transform.
It’s still in alpha but I encourage you to check it out!