React Native with Redux: mapStateToProps()-function is not updating

Question

I am working at a React Native and Redux project with several reducers, that are combined through combineReducers().

I have one component, that doesn't dispatches any actions but only shows information from the redux state. It is connected to this state with the connect function:

class MyComponent extends React.Component {
  componentWillMount() {
    // some code
  }

  render() {
    return(
      <Text>
        { this.props.value }
      </Text>
    )
  }
}

function mapStateToProps(state) {
  return {
    value: state.updaterReducer.value,
  }
}

export default connect(
  mapStateToProps,
) (MyComponent);

There's another part/component in the project, that changes the redux state and value:

import { makeUpdate } from './updater.actions.js';
import configureStore from '@redux/configureStore.js';
const store = configureStore();

// This function is can be called by some buttons in the app:
export default function update() {
  console.log('Update function called');
  store.dispatch(makeUpdate());
}

And here's my problem: when update is called, the updater-action and the updater-reducer are both called, so that the redux state changes, but 'MyComponent' never updates.

Sorry, I misread and deleted the answer. Indeed that should work. Are you sure the state is updated by the other component ? You can verify with the redux dev tools or post it there to have an overview of the problem — Palisanka, Aug 01 '18 at 13:18
Yes, I can verify, that the state is updated, because I put a console.log() in the regarding reducer... I now tried another thing: I added a mapDispatchToProps() and changed the state from 'MyComponent'. Now mapStateToProps(9 updated the props correctly. But that's not my aim, because 'MyComponent' isn't supposed to change the state at the end... — Paul, Aug 01 '18 at 13:22
Very strange, I don't know how to help... perhaps you can share a codesandbox ? — Palisanka, Aug 01 '18 at 13:29
I think this is not possible since I have no React project but a React Native project. But I'll try to organize a small verifiable example case and upload the code... — Paul, Aug 01 '18 at 13:33
I Paul, nothing seems wrong in this component too, if you still have the problem can you zip and upload the project on a cloud ? I'll try to figure out what happens — Palisanka, Aug 02 '18 at 07:59
@Palisanka Thank you very much for this offer, but I found the (very dump) failure on my own in the end (see my answer). — Paul, Aug 02 '18 at 08:22

score 1 · Accepted Answer · answered Aug 02 '18 at 08:20

I could solve the problem on my own: The solution was very easy in the end, but couldn't be found on the basis of the code in the original question: Every time I needed the redux-store, I used a configureStore-function from a web-tutorial to create it on basis of the reducers. So I created multiple times the 'same' store. Unfortunately these stores were not connected to each other...

Sometimes that worked in the project, because a mapStateToProps-function and a mapDispatchToProps-function both were in the the same component and used one store, but sometimes (like in the example in the question) those functions used different stores and couldn't influence each other.

React Native with Redux: mapStateToProps()-function is not updating

1 Answers1