react-redux 6 + React Native - not firing mapStateToProps after state changes

[elimydlarz]

What is the current behavior?

mapStateToProps is run once when the component loads, but does not run again when state is changed.

Given a component of

export default ({
  testx,
}) => (
  <View>
    <Button title="Load" onPress={() => dispatchTest()} />
    <Text>{testx}</Text>
  </View>
);

A mapStateToProps of

const mapStateToProps = state => ({
  testx: state.test,
});

A mapDispatchToProps of

const mapDispatchToProps = {
  dispatchTest: test,
};

An action creator of

export const TEST = 'TEST';

export const test = () => ({
  type: TEST,
});

And a reducer of

export default (state = initialState, action) => {
  switch (action.type) {
    case TEST:
      return { ...state, test: 'toast' };
    default:
      return state;
  }
};

Logging confirms that the state is being updated but that mapStateToProps is not being rerun afterwards. The component will continue to display the initial value of test and will never display the new value set in state by the reducer (toast).

What is the expected behavior?

The state change made by the reducer ought to cause redux to rerun mapStateToProps, thereby updating the props received by the component.

Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?

This issue is happening since I updated react-redux from 5.1.1 to 6.0.0. Downgrading react-redux back to 5.1.1 fixes the problem and everything behaves as expected. I am using React 16.6.3 and React Native 0.57.1.

[AgentCoop]

This issue is related to https://github.com/reduxjs/react-redux/issues/1126

Consider using this solution: https://github.com/reduxjs/react-redux/issues/1126#issuecomment-447341725

[Ephem]

@AgentCoop Are you sure? #1126 is related to updating the state within a single render pass and making the children after that change get the new state (without re-rendering).

As I read this issue, the state change happens in an event listener, which should trigger a new render with the updated state? If so, issues should not be related.

[markerikson]

Please provide a project that reproduces the issue.

[AgentCoop]

@AgentCoop Are you sure? #1126 is related to updating the state within a single render pass and making the children after that change get the new state (without re-rendering).

Well, the topic starter ran into the same problem as myself. I found that discussion helpful, perhaps he will also.

[GuillaumeCisco]

I can confirm the same problem after implementing the withRedux HOC solution. Just commented https://github.com/reduxjs/react-redux/issues/1126#issuecomment-447809372
Reducer is called, but mapStateToProps and following render methods are not called.
Maybe it is due to overriding the ReactReduxContext.

Where are the lines in react-redux, when the diff is made for knowing when to run mapStateToProps. Maybe the state used in this diff is the old one.

[Ephem]

Now that #1126 is properly closed I'll just take a moment to reiterate here that I do not think these issues are related.

@GuillaumeCisco did encounter an issue in the #1126 thread that ended up not being related to the main issue in that thread. Many that have the issue of mapStateToProps not firing seem to have issues with dependencies not matching etc, but that doesn't necessarily have to be the issue here.

I'll echo Mark here and say that it would be great to see a project that reproduces the issue in this thread. :)

[kevincolten]

To provide validation, I'm seeing this in my react-native/react-native-web app, where it works in web but not in native. I'll try to find time for creating a reproducible example.

[chrisgalvan]

I just had to downgrade our app, because of this issue. 😞

from 6.0.0 to 4.4.9 and it worked again.

[markerikson]

@chrisgalvan : as I've said already, please provide a project that reproduces the issue. I've seen several people reporting similar behavior, but I don't use RN myself. If some people can provide projects that specifically show the changes in behavior just by switching from React-Redux v5 to v6, then we can try to figure out what's going on.

[elimydlarz]

I'll try to find the time, but I had hoped the fairly specific scenario I described - including the code I used - would be enough.

Since the project I encountered the problem on is private, I'd have to create a new example project and copy/paste the code I included above into it. I'm not sure where the line is between reporting an issue and fixing it is but my feeling is that this might be slightly beyond it?

I'm working on a new Expo project now and will report back on whether the issue still exists with the latest versions of everything or not.

[markerikson]

@elimydlarz : the problem is that, as I said, I don't use RN and I don't know how to set up an RN project. If you can provide a project that I can simply clone and execute a couple commands to run, then I can take the time to dig into it and see what the behavior is.

I've got a lot of other stuff on my plate. I _want_ to resolve any issues that are reported, especially if it's as bad as "the lib doesn't work", but as a maintainer I really need filed issues to include runnable examples to make it as straightforward as possible for me to investigate. I don't have time to try to create projects from scratch that reproduce problems, especially since I might not set up a project exactly the same way.

Overall, the best thing a user can do to help ensure their problem gets looked at and resolved is create a project that reproduces the issue, and make that available. (This is a general statement that is true for all OSS libs, not just React-Redux.)

[chrisgalvan]

Not a problem @markerikson I started creating a new repo that could repro the issue, but now it's working so yay 🎉!

The repo is here in case you want to see a working example
https://github.com/chrisgalvan/react-native-redux-example

The difference that I can see from this repo to the one where it does not work is that I'm using the expo-react-native 31.0.1 instead of the 32.0.0 (new one).

package.json not working

  "devDependencies": {
    "jest-expo": "~31.0.0",
    "react-native-scripts": "^2.0.1",
    "react-test-renderer": "16.6.3",
    "remote-redux-devtools": "^0.5.16",
    "schedule": "^0.4.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.9.0",
    "eslint-plugin-react": "^7.11.1",
    "expo": "^31.0.6",
    "expo-cli": "^2.6.12",
    "firebase": "^5.5.9",
    "lodash": "^4.17.11",
    "native-base": "^2.8.1",
    "react": "^16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-paper": "^2.2.8",
    "react-native-read-more-text": "^1.1.0",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^3.0.2",
    "react-navigation-material-bottom-tabs": "^1.0.0",
    "react-navigation-redux-helpers": "^2.0.8",
    "react-redux": "^4.4.9",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0"
  }

package.json working

  "dependencies": {
    "expo": "^32.0.0",
    "expo-cli": "^2.6.14",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-paper": "^2.4.0",
    "react-navigation": "^3.0.9",
    "react-navigation-material-bottom-tabs": "^1.0.0",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "remote-redux-devtools": "^0.5.16"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },

I will see if the issue gets resolved by upgrading to the latest expo version and communicate back.

[chrisgalvan]

I just tried in my original project and updating expo to latest version 32.0.0 fixes the issue.

[markerikson]

Interesting.

Couple more questions, I guess:

• Does this happen with "actual" RN?
• What is changed in Expo 31 -> 32?

[JamieBradders]

Just wanted to add that I came across this issue the other day when introducing react-redux into a React Native app that was using expo 31. I also found that upgrading to expo 32 resolved the issue.

I don't know enough about expo and RN to answer the questions above but just wanted to second what @chrisgalvan said about updating expo to the latest version.

[elimydlarz]

I can confirm that new Expo projects no longer have this issue.

I have no idea what bizarre interplay between certain React Native / Expo versions and Redux 6 caused this problem.

Maybe we can close the issue for now, having noted that you can either upgrade Expo or downgrade Redux.

[timdorr]

Closing until there's a repro to look at :)

[vishesh774]

I can still see the same behaviour with ReactNative when used without Expo, Can someone confirm if they were able to solve this ?

@kevincolten Were you able to solve ?

[markerikson]

@vishesh774 : as per prior comments, if you're seeing this in a different environment, _please_ provide a project that reproduces the issue so we can look at it!

[developer239]

@markerikson I just migrated to react-redux v6 and my component stopped re-rendering. You can look at the project here: https://github.com/developer239/redux-react-native-wix-navigation-v2-with-auth (please update react-redux as it is not updated in master) Thank you 🙂

withRedux HOC is here: https://github.com/developer239/redux-react-native-wix-navigation-v2-with-auth/blob/master/src/hocs/withRedux/index.js

[Ephem]

I took a quick look at your project @developer239 and noticed you are not using the latest version of react-native. Please try upgrading to 0.57.8 and see if the problem persists.

I took a very quick look at what happened between expo version 31 and 32, and it seem react-native was upgraded from 0.55 to 0.57 there, so might be that this problem only happens in <0.57.

[developer239]

@Ephem Oh well that is a big thing to ask. My project uses wix navigation and it can be difficult to fix breaking changes in ios or android folder. I updated everything expect react-redux and react-native and I will get back to it later.

[VadyaVL]

Hi all. I had some issue with:
react-native (expo) on iOS, on Android it worked fine.

I create new empty app and write simple logic to use redux. It worked fine on iOS.
I did compare two projects (main and new).
React version was different: main project - 16.7.0, new project - 16.5.0.

I did downgrade react version in main project from 16.7 to 16.5 - it fix this trouble for me.

[dmydry]

Confirm, there is no issue with react 16.5

[jfreeby]

We had the same issue with mapStateToProps and downgrading from react 16.7 to 16.5 fixed the issue.

We are using Expo 32

[kalraneeraj24550]

i am still facing this issue , anybody plz help me.
mapStateToProp function not getting executed.

my project has these dependencies

"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta7",
"react-native-maps": "^0.22.1",
"react-native-status-bar-height": "^2.2.0",
"react-native-typography": "^1.4.0",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^3.3.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"

any one plz help me

[developer239]

@kalraneeraj24550 @jfreeby @VadyaVL @Ephem I just updated my react native boilerplate to React Native 0.59.1 and that solved my issue.

"@react-native-community/async-storage": "^1.2.1",
"formik": "^1.5.1",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-native": "0.59.1",
"react-native-navigation": "^2.13.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"styled-components": "^4.1.3",
"styled-is": "^1.2.2",
"yup": "^0.27.0"

https://github.com/developer239/redux-react-native-wix-navigation-v2-with-auth/blob/master/package.json

Btw now it uses TypeScript and React Hooks so I am pretty confident that it should be a great starting point for new react applications.

[combattardigrade]

I was able to fix the issue by downgrading to @elimydlarz 's dependencies:

react-redux 5.1.1
react 16.6.3
react-native 0.57.1

and I am using
react-navigation 3.3.2

[developer239]

@combattardigrade why would you downgrade your dependencies? You need to update react-native.

[dreamchasersuon]

Hey guys! For anyone who will faced with issue. I can confirm, for me this problem solved by downgrading from (react: '16.8.9'):

`"dependencies": {

"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"expo": "^32.0.0",
"expokit": "32.1.1",
"native-base": "^2.12.1",
"react": "16.8.9",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-datawedge-intents": "^0.1.2",
"react-native-keyevent": "^0.1.1",
"react-navigation": "^3.7.1",
"react-redux": "6.0.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-persist-expo-securestore": "^0.1.1",
"redux-thunk": "^2.3.0"

},`

To (react: '16.5.0'):

`"dependencies": {

"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"expo": "^32.0.0",
"expokit": "32.1.1",
"native-base": "^2.12.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-datawedge-intents": "^0.1.2",
"react-native-keyevent": "^0.1.1",
"react-navigation": "^3.7.1",
"react-redux": "6.0.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-persist-expo-securestore": "^0.1.1",
"redux-thunk": "^2.3.0"

},`

Thanks.

[jfedgar]

I had a similar problem in react native / expo, even after using the suggested versions above.

Strangely it was caused by calling setState in the componentDidMount() method in the top-level App component (as was recommended by the Expo docs for loading a font using their Font api).

Even more strange, this only happens in react native for me. I tried to reproduce it in a create-react-app with redux and there were no issues.

Hopefully this helps someone else.