Typescript Definitions

[alvis]

In responding to #8 and #58, this PR features a complete set of typescript definitions for redux-logic@0.15.

For type checking, run npm run test:typescript, which is also included as part of the publishing process.

[alvis]

@jeffbski:
In the log, I found this error concerning sending the coverage report to codacy. May be there's a setting error with the CI?

[error] "2018-07-12T09:47:21.218Z"  'Error sending coverage'
[error] "2018-07-12T09:47:21.222Z"  Error: Token is required

[chmaltsp]

Any word on this? If this could be merged in it would be super helpful!

[jeffbski]

will work on it today. I was working on upgrading rxjs to 6, but that will take longer than anticipated, so I can switch and do this first.

[chmaltsp]

Thanks so much for the quick reply 🙏!

…

On Fri, Aug 3, 2018 at 11:26 AM Jeff Barczewski ***@***.***> wrote: will work on it today. I was working on upgrading rxjs to 6, but that will take longer than anticipated, so I can switch and do this first. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#112 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKeSTV6py9nJ_ULTqA5qwmbZVcf1xb83ks5uNGuGgaJpZM4VBazR> .

[jeffbski]

Thanks @alvis! Awesome work. Definitely needed someone with typescript knowledge to knock this out.

[ryan-nauman]

@alvis, are you able to easily show me a typescript sample of the async-fetch-vanilla sample with typedefs? Specifically the process params

// in src/users/logic.js
import { createLogic } from 'redux-logic';

export const usersFetchLogic = createLogic({
  type: USERS_FETCH,
  cancelType: USERS_FETCH_CANCEL,
  latest: true, // take latest only

  // use axios injected as httpClient from configureStore logic deps
  // we also have access to getState and action in the first argument
  // but they were not needed for this particular code
  process({ httpClient }, dispatch, done) {
    httpClient.get(`https://reqres.in/api/users`)
      .then(resp => resp.data.data) // use data property of payload
      .then(users => dispatch(usersFetchFulfilled(users)))
      .catch((err) => {
             console.error(err); // might be a render err
             dispatch(usersFetchRejected(err))
      })
      .then(() => done()); // call when finished dispatching
  }
});

[alvis]

Hi @ryan-nauman, sorry for the belated reply. Here it is

import { createLogic } from 'redux-logic';

// for types
import { Action } from 'redux-logic';

const USERS_FETCH = 'USERS_FETCH';
const USERS_FETCH_CANCEL = 'USERS_FETCH_CANCEL';

function usersFetchFulfilled(users: any[]): Action {
  return {
    type: 'YOUR_ACTION_TYPE'
  };
}

function usersFetchRejected(err: Error): Action {
  return {
    type: 'YOUR_REJECTION_TYPE'
  };
}

// the first generic type is for the state, and the second is for the dependency
export const usersFetchLogic = createLogic<{}, { httpClient: any }>({
  type: USERS_FETCH,
  cancelType: USERS_FETCH_CANCEL,
  latest: true, // take latest only

  // use axios injected as httpClient from configureStore logic deps
  // we also have access to getState and action in the first argument
  // but they were not needed for this particular code
  process({ httpClient }, dispatch, done) {
    httpClient
      .get(`https://reqres.in/api/users`)
      .then(resp => resp.data.data) // use data property of payload
      .then(users => dispatch(usersFetchFulfilled(users)))
      .catch(err => {
        console.error(err); // might be a render err
        dispatch(usersFetchRejected(err));
      })
      .then(() => done()); // call when finished dispatching
  }
});

This example could be even cleaner with the createLogic<Dependency = { httpClient: any }> syntax if microsoft/TypeScript#23696 got accepted. Sadly, it's now closed and I'm not sure how microsoft/TypeScript#26349 is better. Anyway, hope the example helps.

[Shannor]

Hey, I've been looking for more examples than just Dependencies. I'm trying to add the Payload type/Interface to the create logic call with little success. Here's an example:

export type User = {
  email: string,
  password: string,
}

const login = createLogic<{}, User, undefined, {api: Api}>({
  type: "LOGIN",
  process({ api, action }, dispatch, done) {
    const { email, password } = action.payload;
    api.signInWithEmailAndPassword(email, password)
      .then((response: any) => {
        const { user } = response;
        dispatch(actions.attemptLoginSuccess());
        dispatch(actions.clearFields());
      })
      .catch((error) => {
        dispatch(error);
      })
      .then(() => done());
  },
});

However, when I do this I get an error on email and password from the payload, stating that they are both do not exist on User. Any tips? I don't see anything particularly wrong here.