Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Nikos
    @quantuminformation
    in the playground, where is the webpack file
    also the docs dont explain how to run the playground app
    i tried this
    Version: webpack 4.29.3
    Time: 67ms
    Built at: 03/26/2019 11:22:09 AM
    
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
    
    ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/nikos/WebstormProjects/react-redux-typescript-guide/playground'
    running webpack in playground
    Piotrek Witek
    @piotrwitek
    @QuantumInformation playground is not using webpack, it's not about the app, the main use-case is to find compiler errors when library types and compiler version is updated
    Nikos
    @quantuminformation
    @piotrwitek ok, how do I run it?
    Piotrek Witek
    @piotrwitek
    all scripts are defined in package.json they are self explanatory
    Afreen Rahman
    @afreen23
    Hey guys I am workking on this project ...when I ran yarn dev inside `frontend folder got this error:
    ittingERROR in /home/wiz/web/web-ui/node_modules/@types/unist/index.d.ts(31,20):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/unist/index.d.ts(40,20):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/unist/index.d.ts(97,12):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/vfile-message/index.d.ts(69,24):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/vfile/index.d.ts(48,15):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/yargs/index.d.ts(98,106):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/yargs/index.d.ts(105,112):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/yargs/index.d.ts(262,28):
    TS2304: Cannot find name 'unknown'.
    ERROR in /home/wiz/web/web-ui/node_modules/@types/yargs/index.d.ts(376,9):
    TS2304: Cannot find name 'unknown'.
    Version: typescript 2.9.2
    This message was deleted
    any help!!
    Piotrek Witek
    @piotrwitek
    @afreen23 you're on wrong TS version, unknown is a quite recent feature, and you're using 2.9.2
    Nikos
    @quantuminformation
    Hey guys, I'm loving this project!
    Nikos
    @quantuminformation

    btw, if you want to move your playground to the CRA, you will need this:

    const composeEnhancers =
      (window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] as typeof compose) || compose

    otherwise you will get

    src/store/utils.ts:6:12 - error TS2339: Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'.
    you also get trouble with the index: do do with when the '--isolatedModules' flag is provided.
    Nikos
    @quantuminformation
    Hi, could someone show me the best pattern to convert this thunk action to typesafe actions? I am not sure from the variety of options in the tutorial. Simple is best
    import { DownTime } from './models'
    import { getDowntimes } from '../../rest-api/Downtime-api'
    
    export const getDowntimesService = () => (search: string) => {
      return dispatch => {
        getDowntimes().then(result => {
          dispatch(addDowntimes(result))
        })
      }
    }
    
    /* _____________ CRUD State _____________ */
    
    export const addDowntimes = (data: DownTime[]) => {
      return {
        type: DownTimeActionType.ADD_DOWNTIMES,
        payload: data
      }
    }
    
    export enum DownTimeActionType {
      ADD_DOWNTIMES = 'ADD_DOWNTIMES'
    }
    
    // todo covert to typesafe actions
    /*
    const GET = 'downtime/GET'
    
    export const get = createAsyncAction(GET)<void>()
    */
    Piotrek Witek
    @piotrwitek
    @QuantumInformation if simple is best for you I would go with (It's not clear if you want to refactor thunks to rxjs epics so I left it)
    export const getDowntimes = createStandardAction('downtime/GET')<DownTime[]>();
    
    // in reducer switch: getType(getDowntimes)
    Jeroen Claassens
    @Favna

    @piotrwitek Hello, I'm trying to implement the new createReducer API and while I got it working on main code I'm having some weird issues with test code. Since there are quite a few, I've placed content of all relevant files on a Gist here https://gist.github.com/Favna/0bf4ec49bc4fb58c9a54b1b05a77c143

    The error is also there but to describe it in short here as well:
    For whatever reason it fails to pick up on some of my actions for some odd reason causing TS to give the error:

    // ... truncated the top part, see gist for full error
     Type '{ type: UserManagementActionTypes.HANDLE_CHANGE_PAGE; payload: number; }' is not assignable to type '{ type: UserManagementActionTypes.FETCH_ROLES_SUCCESS; payload: UserRole[]; }'.
        Types of property 'type' are incompatible.
          Type 'UserManagementActionTypes.HANDLE_CHANGE_PAGE' is not assignable to type 'UserManagementActionTypes.FETCH_ROLES_SUCCESS'

    Oddly enough this does not happen to all my pre-existing Reducer tests, for example I have an action UsersActionTypes.FETCH_SUCCESS which has no typings error at all in the test code, while if I compare test code and the IntelliSense VSCode gives on parts like the imported reducer and actions they are virtually similar (apart from this particular example being in another reducer)

    I've tried various things such as disabling some parts of the code, changing the signature of the action, reading through your typings reducer guide multitude of times and more but for the life of me I cannot figure out why this issue occurs. Any help would be much appreciated.

    Jeroen Claassens
    @Favna
    Upon further implementation of the new way of writing tests it turns out this issue is entirely exclusive to the "usermanagement" as described and linked above. I will do further investigation into it and report back if I find anything but for now the issue remains.
    Jeroen Claassens
    @Favna
    I've been trying some more stuff and found more odd behaviour. Namely when I comment out one of a small selection of my action types (from the enum) the test suddenly works, but it obviously breaks code elsewhere and replacing those instances with the text that was retrieved from the enum just ends up having the test fail again but on another action type. The only difference between this "UserManagament" section compared to my other parts of the store is that the others get all their action types covered by reducer and actions, but UserManagement does not because quite a few of the action types are just used in my redux-saga so they are actions, but not in the reducer.
    Piotrek Witek
    @piotrwitek
    Hey @Favna, there was an issue in recursive conditional type algorithm, now it's fixed, please try recently released v4.1.3
    Jeroen Claassens
    @Favna
    Upgraded and it looks like it's been fixed indeed. Thank you for the swift response and resolution @piotrwitek !
    Raymond Barlow
    @raymanoz
    Hey peeps
    I'm attempting to introduce typescript to an existing project
    when I run webpack, I get this:
    ✖ 「atl」: Child process failed to process the request: TypeError: Cannot read property 'kind' of undefined
        at getErrorSpanForNode (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:9637:22)
        at createDiagnosticForNodeInSourceFile (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:9597:20)
        at Object.createDiagnosticForNode (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:9588:16)
        at getTargetOfImportClause (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:33871:51)
        at getTargetOfAliasDeclaration (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:34013:28)
        at resolveAlias (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:34050:30)
        at checkAliasSymbol (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:59479:26)
        at checkImportBinding (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:59509:13)
        at checkImportDeclaration (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:59523:25)
        at checkSourceElementWorker (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:59895:28)
        at checkSourceElement (/Users/barlowra/dev/projects/acme/src/main/react/node_modules/typescript/lib/typescript.js:59738:17)
        :
        (etc)
    reduced my app to the minimum this to cause this, and it seems to be when Provider is imported/used
    any ideas on how to fix it?
    Raymond Barlow
    @raymanoz
    fixed it by adding @types/redux & @types/react-redux
    Piotrek Witek
    @piotrwitek
    That's great you figured it out yourself @raymanoz 👍
    Marouane R
    @mrassili
    Hello
    I have a question y'all?
    we have a react app already written in JS, and want add some type-safety to it so we thought about @piotrekwitek's typesafe-actionsbut it's not clear to me, it's possible to integrate with a non-typescript app?! should we re-write our app in TS so we can benefit from this library? thanks
    Piotrek Witek
    @piotrwitek
    Hey @mrassili, yes it will work perfectly in JS without TypeScript, but you'll miss a lot of benefits of the library. I would recommend either using vscode and enabling allowJs for type checking in JS for some benefits, but to get all the benefits and catching all possible errors is to at lease write all your redux code and action creators in TS with, the rest of the application like UI components could be written in pure JS in files with a .ts extension.
    Afreen Rahman
    @afreen23
    Hello I want to know is it a good practice to return empty fragment from a componnet based on some condition.
    e.g return <></>
    Jesus The Hun
    @JesusTheHun

    Hello, I'm trying to build a reducer factory for a collection of classes that extends the same one, and all have some default behaviour.
    I declare my actions in a straight forward way (mandatory to preserve string literals) :

    // Note : class Control extends Manageable
    // This is fine, no error
    export const fetchControlAsync = createAsyncAction(
      'FETCH_CONTROL_REQUEST',
      'FETCH_CONTROL_SUCCESS',
      'FETCH_CONTROL_FAILURE'
    )<undefined, Control, string>();

    However when trying to declare this function :

    const getDefaultManageableReducer = <T extends Manageable>(defaultValue: T, fetchEntity: AsyncActionCreatorBuilder<SOMETHING, T, string>) { /* ... */ }
    // I've tried to set SOMETHING to undefined, T, unknown, never, it always shows a type error
    // The goal is to use the function as :
    getDefaultManageableReducer<Control>(defaultValue, fetchControlAsync);

    I don't quite understand why, maybe someone can help ? maybe @piotrwitek ?

    Piotrek Witek
    @piotrwitek
    @afreen23 no it's not, you should return null
    @JesusTheHun it's not so easy to do but possible, I have some proof of concept in WIP state but at the moment I'm heavily occupied so no release plans yet, but I would love to finish it as it would help me tremendously in my current project.
    Jesus The Hun
    @JesusTheHun
    ok, I'll try to work on it on my side ; maybe you can share your WIP so I get the gist of it ?
    @piotrwitek also I'm happy to see I'm not the only weirdo bothered by the code duplication ^^
    Jesus The Hun
    @JesusTheHun
    @piotrwitek what kind of support do you need to keep improving your libs & guides ?
    Piotrek Witek
    @piotrwitek
    @JesusTheHun thanks for asking, that's really nice! Actually I had some family matters that constrained all of my free time. I'm trying to answer/resolve the most critical issues and I'll take a look at remaining ones ASAP
    I'd certainly use some help with documentation while I can finish some WIP work I have
    most of them are near completion but I need some quality focus time to finish them which was hard to get in the last 2 months
    Jesus The Hun
    @JesusTheHun
    I hope you and your family are ok.
    if you have any point in particular you want me to address, ping me directly in the issue.
    Jesus The Hun
    @JesusTheHun
    I'm myself struggling with some code using https://github.com/piotrwitek/react-redux-typescript-guide#typing-reducer-with-typesafe-actions, the state and action params in the handler appear with implicit type any
    Piotrek Witek
    @piotrwitek
    @JesusTheHun if you could create a sandbox (using sandbox skeleton app in the project) and isolating the problems that you have I could help you then
    Jesus The Hun
    @JesusTheHun
    I worked it out, ty
    Night Knight
    @nkCoding

    Hi, I'm trying to write an HOC according to this example.
    https://github.com/piotrwitek/react-redux-typescript-guide#--hoc-wrapping-a-component

    It fails to convert restProps to BaseProp when I make the extended prop required:

    export const withState = <BaseProps extends InjectedProps>(
      BaseComponent: React.ComponentType<BaseProps>
    ) => {
      type HocProps = Diff<BaseProps, InjectedProps> & {
        initialCount: number    // <-- make this one required
      }
      // ...
      return class Hoc extends React.Component<HocProps, HocState> {
        // ...
        render() {
          const { initialCount, ...restProps } = this.props;    // <-- take `initialCount` out
          const { count } = this.state;
    
          return (
            <BaseComponent
              count={count}
              onIncrement={this.handleIncrement}
              {...(restProps as BaseProps)}    // <-- conversion failed
            />
          )
        }
      }
    }

    TypeScript Error:

    Conversion of type 'Pick<Readonly<HocProps> & Readonly<{ children?: ReactNode; }>, "children" | Exclude<SetDifference<keyof BaseProps, "count" | "onIncrement">, "initialCount">>' to type 'BaseProps' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
      'BaseProps' could be instantiated with an arbitrary type which could be unrelated to 'Pick<Readonly<HocProps> & Readonly<{ children?: ReactNode; }>, "children" | Exclude<SetDifference<keyof BaseProps, "count" | "onIncrement">, "initialCount">>'.ts(2352)
    Conversion of type 'Pick<Readonly<HocProps> & Readonly<{ children?: ReactNode; }>, "children" | Exclude<SetDifference<keyof BaseProps, "count" | "onIncrement">, "initialCount">>' to type 'BaseProps' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
      'BaseProps' could be instantiated with an arbitrary type which could be unrelated to 'Pick<Readonly<HocProps> & Readonly<{ children?: ReactNode; }>, "children" | Exclude<SetDifference<keyof BaseProps, "count" | "onIncrement">, "initialCount">>'.
        Type '(Readonly<HocProps> & Readonly<{ children?: ReactNode; }>)[P]' is not comparable to type 'BaseProps[P]'.
          Type 'Readonly<HocProps> & Readonly<{ children?: ReactNode; }>' is not comparable to type 'BaseProps'.
            'BaseProps' could be instantiated with an arbitrary type which could be unrelated to 'Readonly<HocProps> & Readonly<{ children?: ReactNode; }>'.ts(2352)

    How to properly add required props to HOC with TS?