question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:31 (9 by maintainers)

github_iconTop GitHub Comments

5reactions
kalraneeraj24550commented, Mar 11, 2019

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

4reactions
dreamchasersuoncommented, Apr 24, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

State changes by dispatching an action but mapStateToProps ...
I am developing an application with react-native and redux. I want to save my favorite movies in the store. Thus I set up...
Read more >
Connect | React Redux
The mapStateToProps and mapDispatchToProps deals with your Redux store's ... state changes, and given the store state as the only parameter.
Read more >
3 small tips for better Redux performance in a React app
That means that the N action must be independent of the state created by the N-1 action. In other words, you should be...
Read more >
Hooks | React Redux
The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function...
Read more >
Step-By-Step: How to Add Redux to a React App | Codementor
The state will be an integer. Step 1: Import Redux NPM packages. npm install redux react-redux. Step 2: Create a Reducer. A reducer ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found