0

I am having trouble creating this shared component in my project. This is simplified version of its code:

import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {
    platform: state.device.get('platform') //defines if iOS or Android
  };
}

export function SharedView({ theme, ...props }) {
  return <View {...props}>{theme}</View>;
}

export default SharedView(
  connect(mapStateToProps, null)
);

As I try to add console.log or alert inside of my mapStateToProps I get nothing and it seems I can not see it from my SharedView. I know I could rewrite it to class SharedView extends Component { ..., but for certain reasons I need to keep the format.

Any ideas how to get this global state value?

Mindaugas
  • 1,173
  • 5
  • 15
  • 31
  • Try to use this: `export default connect(mapStateToProps, null)(SharedView)`, not: `SharedView(connect...)` – Василий Барбашев Jun 15 '16 at 12:46
  • Thanks for suggestion, but still the same situation in this syntax. – Mindaugas Jun 15 '16 at 12:58
  • Check in yours `mapStateToProps`, `state` is undefined? – Василий Барбашев Jun 15 '16 at 13:00
  • Why `export function SharedView`? No need to export this function. Try to remove the export there and see if that resolves the issue. – Moti Azu Jun 15 '16 at 13:37
  • mapStateToProps is fully ignored for some reason, I cannot console log it or alert it, or even debugger jumps imidiatelly to export function StatsBar() – Mindaugas Jun 15 '16 at 13:54
  • 1
    @MindaugasJačionis use `class SharedView extends React.Component {}` and dont export this. Code will work when u returned `export default connect(mapStateToProps, null)(SharedView)` – Василий Барбашев Jun 16 '16 at 13:44
  • Yea, I know I can do this, I am just not sure what to do with my index then. These shared components are in shared folder where index.js exports them and then I can include them in other files using import {SharedElement} from '../shared' With this class approach I kinda can not add it like that, which ruins consistency. For time being I already did as you suggested, but will need to look more into this later. :) – Mindaugas Jun 16 '16 at 14:36

1 Answers1

2

connect is a higher order function - your component is supposed to be wrapped in it not the other way around.

export default connect(mapStateToProps)(SharedView);
Dominic
  • 62,658
  • 20
  • 139
  • 163