Comments (6)
@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.
@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.
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.
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.
@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.
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)
- VSCode Intellisense broken by RootState HOT 1
- Experiencing a type compilation error when using react-redux connect function for a component that does not inject additional properties into the wrapped base component HOT 11
- Suggestion: Examples for new redux hooks and react-router hooks HOT 2
- Playground fails to compile - import order HOT 1
- Regarding 'Typing connected component with redux-thunk integration' section HOT 1
- Q: how to avoid exposing actionCreators when using redux-thunk
- `bindActionCreators` example is outdated
- src/hoc/connected-with-count.tsx type cast is incorrect
- MapDispatchToProps shorthand HOT 5
- Add new example for non-HOC component that uses connect HOT 2
- Cannot run up
- why the WithConnectedCountUsage component cannot increment the counter?
- 'fc-counter-connected-bind-action-creators.usage' component cannot work HOT 2
- property does not exist on type 'IntrinsicAttributes & Pick<any, symbol>'
- Start playground dir has a error
- Why not use immutable
- Slow typescript compile time HOT 1
- I got parsing error
- Link to missing anchor in the guide HOT 2
- Refactor RenderProps components
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-redux-typescript-guide.