Giter Site home page Giter Site logo

Comments (6)

piotrwitek avatar piotrwitek commented on May 22, 2024 1

@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.

from react-redux-typescript-guide.

piotrwitek avatar piotrwitek commented on May 22, 2024 1

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

from react-redux-typescript-guide.

piotrwitek avatar piotrwitek commented on May 22, 2024

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!

from react-redux-typescript-guide.

29er avatar 29er commented on May 22, 2024

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 !

from react-redux-typescript-guide.

piotrwitek avatar piotrwitek commented on May 22, 2024

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

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

from react-redux-typescript-guide.

29er avatar 29er commented on May 22, 2024

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 !

from react-redux-typescript-guide.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.