question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DeepImmutable error while using ReturnType<typeof mapStateToProps>

See original GitHub issue

Any idea how to get rid of error Type 'DeepImmutableArray<string>' is missing the following properties from type... except import DeepImmutable from ‘deox/dist/types’ or explicty declare props?

Demo: https://codesandbox.io/s/vyqkr8y643?fontsize=14 Error in Component.tsx

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
the-dr-lazycommented, May 27, 2019

The return type of a reducer should be what it actually returns and it is equal to return type of all handlers it has. So the return type of a reducer can be inferred from the return type of all handlers it has.

Also, because of the reactivity nature of the state in Flux, the return type of a reducer (which in the following called output/next state) should extend the input/prev state type. For now, the input/prev state type is immutable but it is going to also be mutable in #58 and according to the previous sentence the output/next state can be as follow:

  1. immutable or mutable when the input/prev state is immutable.
type NamesState = DeepImmutableArray<string>

const defaultNamesState: NamesState = Object.freeze([])

const namesReducer = createReducer(defaultNamesState, handleAction => [
  handleAction(actionA, (state, { payload }) => [...state, payload]), // string[]
  handleAction(actionB, (state) => state) // DeepImmutableArray<string>
])

namesReducer(...) // string[] | DeepImmutableArray<string>
  1. just mutable when the input/prev state is mutable.
type NamesState = string[]

const defaultNamesState: NamesState = []

const namesReducer = createReducer(defaultNamesState, handleAction => [
  handleAction(actionA, (state, { payload }) => [...state, payload]), // string[]
  handleAction(actionB, (state) => Object.freeze(state)) /* throws error
                                                            because of that input/prev state 
                                                            defined as a mutable array
                                                            but the output/next state is a `ReadonlyArray` */
])

namesReducer(...) // string[] 

@rlesniak @Haaxor1689 @LouizFC and other guys who interested in Deox, It would be great to have your opinion/feedback about the above solution because without that the growth of the Deox is not possible. If you are agree hit 👍; if not hit 👎 (Also it is awesome to leave a comment to describe your opinion/solution).

0reactions
the-dr-lazycommented, Jun 10, 2019

Also, I found that combineReducer type signature in Redux isn’t so accurate. I will try to send a PR to reduxjs/redux for fixing that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react redux typescript: cannot pass inherited props from parent ...
My understanding is that I should be able to pass props from the parent and not have to worry about including the props...
Read more >
React-redux Continuing #21417, unable to pass props from ...
My understanding is that I should be able to pass props from the parent and not have to worry about including the props...
Read more >
Usage with TypeScript - React Redux
The package includes a helper type, ConnectedProps , that can extract the return types of mapStateToProps and mapDispatchToProps from the first ...
Read more >
Typescript and Redux - Cloudoki
When I first started using Typescript one particular area in which I had to spend some time thinking about type annotations was Redux....
Read more >
Redux-connected custom widget - Optimizely
It is recommended to use them when possible. ... type Props = WidgetProps & ReturnType<typeof mapStateToProps>; const ReduxConnectedWidget = (props: Props) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found