Calling (helper) function in redux

Question

I'm using react-native-router-flux with react-redux and I think that I should ask this question here, correct me if I'm wrong.

I have ActivityModal Container which I call to show up whenever there is an API call or similar thing where I want to show that modal. Currently I'm calling it like this:

Actions.refresh({key: 'activityModal', visible: true}); to show and Actions.refresh({key: 'activityModal', visible: false}); to hide.

This works but I'd like rather to make some more elegant solution. I added two actions (for show and hide) and added there those lines of code and it works but I'm not sure if that's correct way to do it (and without using reducers, only action - i'm new to the redux). I'm thinking about another way to do this: adding some helper functions where I'll have those Actions.refresh calls and importing them where I need to access activityModal visibility.

Please tell me or suggest me what is the most correct way to do this?

Thanks!

edit: I succeeded but I'd like you to confirm if it's good practice. Here is what I did:

containers/LoginContainer.js

...
this.props.showActivityModal(); // calling this on button press
...

actions/activityModal.js

...
export function showActivityModal() {
  return {
    type: types.ACTIVITY_MODAL_SHOW,
    payload: {}
  }
}
...

reducers/activityModal.js

...
return {
   visible: true,
   text: ''
};
...

components/ActivityModal.js

...
class ActivityModal extends Component {
   ...
   componentWillReceiveProps(nextProps) {
      this.setState({
        visible: nextProps.activityModal.visible
      })
   }
   ...
}

function mapStateToProps(state) {
  return {
    activityModal: state.activityModal
  };
}

export default connect(mapStateToProps)(ActivityModal);

Thanks!

When you make an HTTP request and want the user to see a loading spinner, you dispatch an action `FETCH_SOME_RESOURCE_LOADING`. That action should make a `loading` property in the state be set to true. Then you can use that to define how your UI should look like (if `loading` is `true`, show a spinner). When the response is obtained from the server, dispatch a `FETCH_SOME_RESOURCE_SUCCESS` that makes `loading` become false, thus your UI will no longer show a loading spinner. — nbkhope, Mar 28 '17 at 23:18
Thank you @nbkhope. I eventually did like that calling this.props.showActivityModal() and it works, goes in reducer and returns param but I have another question if you would be able to answer me. Do I have now to write mapStateToProps in every container I want to use that loading prop or is there some way to mapStateToProps on Router (eg. AppContainer that I use which contains Router with scenes and mapDispatchToProps). I tried to add mapStateToProps but it says scene keys are already defined. Thanks — Mil, Mar 29 '17 at 09:41
Actually this won't work simpler, it would be just over complicating (at least what I created) as I'm getting new prop in the Container while I have to update different component (activityModal) so I would still have to call Actions.refresh to change state of that component... right? — Mil, Mar 29 '17 at 09:53
Yes, you'd have to use mapStateToProps to be able to access the loading property. If you have different resources, you'd have a different loading property for each resource. — nbkhope, Mar 29 '17 at 18:38
Thanks @nbkhope! I edited my question how I did it and it works without calling mapStateToProps on every container I need. — Mil, Mar 30 '17 at 07:00

score 0 · Accepted Answer · answered Mar 31 '17 at 08:12

To do this what I wanted, all I had to do is:

function mapStateToProps(state) {
  return {
    activityModal: state.activityModal
  };
}

export default connect(mapStateToProps)(ActivityModal);

to component I wanted to change state. And to dispatch an action to actually change state of activityModal.

I guess that's normal behavior for react redux but I was on the wrong track when I first started but hey, I figured it out.

Calling (helper) function in redux

1 Answers1