Storybook: action logger custom component

[aerda]

Describe the bug
I have create a view with 2 buttons ( react-native-paper) & I use redux & react-router-native & TS

so when I add the addon-action wont trigger in the localhost:7007 the loger actions

Expected behavior
I where waiting to see the log in the storybook UI on localhost:7007

Code snippets

export class Hello extends React.PureComponent<ICompProps> {
  constructor(props: ICompProps) {
    super(props)

    this.addCounter = this.addCounter.bind(this)
    this.subtractCounter = this.subtractCounter.bind(this)
  }

  public render() {
    const { counter } = this.props

    return (
      <View>
        <Button mode="contained" onPress={this.addCounter}>
          +
        </Button>
        <Button mode="contained" onPress={this.subtractCounter}>
          -
        </Button>
        <Text>{counter}</Text>
        <Link to="/1">
          <Button>Go to Hello2</Button>
        </Link>
      </View>
    )
  }

  private addCounter = () => {
    this.props.handleIncrement()
  }

  private subtractCounter = () => {
    this.props.handleDecrement()
  }
} 

An this is the wrapper

<StoreProvider store={store}>
        <PaperProvider theme={theme}>
          <NativeRouter>
            <Switch>
              <Route exact path="/" component={Hello} />
            </Switch>
          </NativeRouter>
        </PaperProvider>
      </StoreProvider>

* THIS IS THE STORY *

const SingleProviderWrapper = ({ children }) => {
  return (
    <StoreProvider store={store}>
      <PaperProvider theme={theme}>
        <NativeRouter>
          <Switch>{children}</Switch>
        </NativeRouter>
      </PaperProvider>
    </StoreProvider>
  )
}

storiesOf('Hello', module)
  .addDecorator(story => {
    return <SingleProviderWrapper>{story()}</SingleProviderWrapper>
  })
  .add(
    'hello mock',
    () => <Hello handleIncrement={() => console.log('ouch')} />
  )

Additional context
I have tryed with:

• onPress={() => console.log('ouch')}

• withActions

Plz help

[aerda]

After 3 hards days I have solve my issue. the solution is quiet simple.

// create a simple Mock of my Store, dont pass the original one 
const store = {
  getState: () => ({
    counter: 0,
  }),
  subscribe: () => 0,
  dispatch: action('dispatch'),
}

An now it working =)

[ndelangen]

Glad to hear you found a solution @aerda, sad to hear it took you 3 days :(

Can we do something to our docs to improve this?