SFCCounterConnectedExtended does not work in examples

[29er]

The initialCount property does not work on the SFCCounterConnectedExtended component.

import * as React from 'react';

import { SFCCounterConnectedExtended } from '@src/connected';

export default () => (
  <SFCCounterConnectedExtended
    label={'SFCCounterConnectedExtended'}
    initialCount={10}
  />
);

the initalCount is not read into the props because you are using the SFCCounter. What would be your recommendation on fixing this, create a new component or interface ?

[piotrwitek]

Hi @29er
This was really a contrived example from top of my head, thank's for pointing that out.
After looking at this, it should be rather like below to make sense (I'll do an update to the guide):

export interface SFCCounterConnectedExtendedProps {
  initialCount: number,
}

const mapStateToProps = (state: RootState, ownProps: SFCCounterConnectedExtendedProps) => ({
  // if redux store value is undefined, use initialCount to initialize 
  count: state.counters.sfcCounter || ownProps.initialCount,
});

export const SFCCounterConnectedExtended = connect(mapStateToProps, {
  onIncrement: actionCreators.incrementSfc,
})(SFCCounter);

I know that's not really a precise answer to your question but for this particular example using SFCCounter the solution make sense and should work.

Maybe you can provide a different example for your specific use case if it does not answer your question.
Cheers!

[29er]

Yep that makes perfect sense. thanks! I am just learning Typescript for the first time and this has been an excellent repo to find. At this point even the simplest things are tripping me up. So thanks : ) . I'd love to see an actual component implementation of the Todos !

[piotrwitek]

@29er cool, I'll close the ticket.

About Todos implementation, seems like a nice idea. I'll try to add it in the future.

[29er]

Thanks Piotr ,so what I don't understand, is even after I change the example , when I create the component like so
<SFCCounterConnectedExtended label={'SFCCounterConnectedExtended'} initialCount={10} /> the initial count is 10 as expected. However if I click on Increment, the number goes to 1 ?

const mapStateToProps = (state: RootState, ownProps: SFCCounterConnectedExtendedProps) => ({
count: state.counters.sfcCounter || ownProps.initialCount,
});

This should set the state 'count' to 10, and should be 11 on the next onIncrement, I would have thought !

Can you explain how you would fix this in your example ? Thanks !

[piotrwitek]

@29er The problem is we do not update the store with this initial value on component mount event, we only show it as a default when the store value is 0, which is kind of naive implementation.

Need to rethink this example again, give me a moment hehe :)
Thanks for a feedback.

[piotrwitek]

@29er fixed, now it should add or subtract a initial value from state so increment will work just fine the same for initial value