React-redux: React-Redux 6 doesn't trigger state/changes after upgrading

[CROSP]

Do you want to request a _feature_ or report a _bug_?

Probably a bug or conflicts with other packages.

What is the current behavior?

I have been using react-redux 5.1.1, after upgrading to v6.0.0 my components stopped getting any updates from store, events are dispatched, state is updated, but no changes are being propagated to components, therefore nothing is rendered.

Here is a video for better understanding the problem - https://www.screencast.com/t/NE5wouflLs

What is the expected behavior?

Should work without changing anything as far as no braking changes were introduced.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

package.json file that works - https://gist.github.com/CROSP/f89558dee71f3dcf4bfbecec71e9d248
package.json file that causes such weird behavior - https://gist.github.com/CROSP/f251b7596da98658a624742b55116c5e

Did anyone face similar issues?

[markerikson]

We've seen various reports like this, but they've generally turned out to be misconfiguration issues of some kind.

Can you try to put together a minimal project that reproduces the issue, preferably as a CodeSandbox?

[afholderman]

We were having this same issue in our app and downgrading from React 16.7 to 16.5.2 alleviated the symptoms.

[grvk]

Hello guys,

I spent a couple days dealing with issue. It got resolved when I rolled back to redux-react version 5.
I also put together a sample project that shows this issue (I tested it on iOS simulator only. Not sure about Android):

import React, { Component } from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from "react-redux";
import { Text } from 'react-native';

// ACTIONS
const getHomePageTextbooks = () => {
  return {
    type: 'GET_DATA'
  };
};

// REDUCER
const INITIAL_STATE = {
  data: []
};

const HomePageTextbooks = (previousState = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'GET_DATA':
      return { data: [1,2,3,4,5,6,7] };
    default:
      return previousState;
  }
};

// STORE
const store = createStore(HomePageTextbooks);
setTimeout(() => { console.log("LAST STORE'S STATE: ", store.getState())}, 3000);

// REACT NATIVE ELEMENT
class DumbElement extends Component {
  constructor(props) {
    super(props);
    this.props.getHomePageTextbooks();
  }

  // @BUG: SHOULD UPDATE to '7'. IT NEVER HAPPENS
  render() {
    return <Text style={{ marginLeft: 50, marginTop: 100 }}>{this.props.data.length}</Text>
  }
}

const DumbElementRedux =
  connect(({ data }) => ({ data }), { getHomePageTextbooks })(DumbElement);

// APP
export default App = (props) => {
  return (
    <Provider store={store}>
      <DumbElementRedux />
    </Provider>
  )
}

I also created a repository and pushed it there. You can find it here:
https://bitbucket.org/okazia/reactreduxbug6.0.0/

[grvk]

The issue disappears if you downgrade react-redux to version 5

[markerikson]

@grvk : thanks. Can you also try setting that up as an Expo Snack? That would be easiest for me to investigate.

[grvk]

Sorry, I spent like the past 6 hours cutting down dependencies of my regular project and simplifying the code. I did it so that there would be at least some kind of example that reproduces this issue. I can't spend more time on it :-)

[timdorr]

Closing until someone can provide a more complete example.

[markerikson]

FWIW, I pasted the app.js file into Expo Snack and it worked fine there toggling between v5 and v6. I've never worked with RN before, so I'm not sure what tooling I would need to try out the repo locally.

[kevincolten]

I've boiled down the issue to how you are calling the action

  componentDidMount = () => {
    // When calling the action as a prop, it works
    // return this.props.getHomePageTextbooks();

    // When calling the action as imported directly, it does not
    // eg. import { getHomePageTextbooks } from './actions';
    return getHomePageTextbooks();
  }

Here is an Expo Snack demonstrating it

[markerikson]

@kevincolten : looking at the provided repo, I see getHomePageTextbooks being passed to connect, and this.props.getHomePageTextbooks in cDM. So, I don't think that's the issue.