Neither selector or redux gets updated inside component

Summary

I don’t know if this is a bug or a question. I have an event listener with a selector in the Redux wrapper, this works fine.

ReduxWrapper.js

import React from 'react';
import { Provider } from 'react-redux';
import { createStore as reduxCreateStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'

import rootReducer from '.';
import { screenResize } from '../actions/uiActions'

const createStore = () => process.env.NODE_ENV === 'development' ? reduxCreateStore(rootReducer, applyMiddleware(thunk, logger)) : reduxCreateStore(rootReducer, applyMiddleware(thunk));

window.addEventListener('resize', () => {
  createStore().dispatch(screenResize())
})


export default ({ element }) => (
  <Provider store={createStore()}>{element}</Provider>
);

The reducer updates properly also

uiReducer.js

const uiReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.SCREEN_RESIZE:
      return { ...state, screenHeight: action.screenHeight, screenWidth: action.screenWidth };

    default:
      return state
  }
}

Then the component is something like

const ComponentName = ({ screenWidth, isMobile }) => {
   return `Screen Width is: ${screenWidth}`;
}

ComponentName.propTypes = {
  screenWidth: PropTypes.number,
  isMobile: PropTypes.bool
}

const mapStateToProps = (state) => {
  return {
    isMobile: isMobile(state),
    screenWidth: state.ui.screenWidth
  }
}

export default connect(mapStateToProps)(ComponentName)

I also tried to convert to class component, use getDerivedStateFromProps, and it still does not update, neither the screenWidth, nor the isMobile.

If dispatch actions from the component, like I am doing somewhere else, it works, this that gets dispatched from outside the component does not work

Relevant information

Environment (if relevant)

System: OS: Windows 7 6.1.7601 CPU: (4) x64 AMD A6-3670 APU with Radeon™ HD Graphics Binaries: Node: 13.7.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.17 - /c/Python27/python npmPackages: gatsby: ^2.19.7 => 2.19.21 gatsby-background-image: ^0.10.2 => 0.10.2 gatsby-image: ^2.2.39 => 2.2.41 gatsby-plugin-apollo: ^3.0.1 => 3.0.1 gatsby-plugin-manifest: ^2.2.39 => 2.2.42 gatsby-plugin-offline: ^3.0.32 => 3.0.35 gatsby-plugin-postcss: ^2.1.20 => 2.1.20 gatsby-plugin-react-helmet: ^3.1.21 => 3.1.22 gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 gatsby-plugin-sharp: ^2.4.7 => 2.4.7 gatsby-plugin-stylus: ^2.1.21 => 2.1.21 gatsby-source-filesystem: ^2.1.46 => 2.1.48 gatsby-transformer-sharp: ^2.3.17 => 2.3.17

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js:

export { default as wrapRootElement } from './src/state/ReduxWrapper';

gatsby-ssr.js:

export { default as wrapRootElement } from './src/state/ReduxWrapper';

[pieh]

I assumed gatsby-browser only here, because of window.addEventListener which would fail in ssr (window is not defined), but yeah - redux store should probably be recreated for each page (it somewhat depends on the state shape and actions you dispatch on initial render - you might not to re-init store for each page).

In any case, I do think ResizeWatcher is the way to go here 😃

[Js-Brecht]

@algebrathefish you indicated on spectrum that the problem is solved. I think we can close this issue now 🙂

If you have any more questions, don’t hesitate to ask!