I'm currently using typescript-fsa version 2.5. I'm augmenting ActionCreator interface like this:

declare module "typescript-fsa" {
  export interface ActionCreator<P> {
    type: string;
    payloadType: P;
    match: (action: Fsa.AnyAction) => action is Action<P>;
    (payload: P, meta?: Meta): Action<P>;
  }
}

The reason I'm doing it is that I extended it with payloadType. In 3.0 I'm not able to do that since types in typescript cannot be augmented. Is there any reason why you decided to use type?

Love your work, so much nicer to have good types.
I've been using it with the typescript-fsa-redux-thunk wrapper bindActionThunk().

I have a use case at the moment where I am creating myIsType based on isType.
The function prototype on the actionCreator parameter gives type errors.
I was wondering if the type for that parameter on isType might be loosened without risk ?

pendingAsyncActions is just an array of all the action async api creators that I care to keep track of pending activity in the application.

I still feel a bit of depth with complexities of typscripts types and interpretting its error messages I tried to create a more restrictive type for myIsType than any but quickly got complex type messages that defeated me.

const myIsType = isType as any;

export default function pendingCountReducer(
  count: State = InitialState,
  action: AnyAction
) {
  pendingAsyncActions.forEach(apiAction => {
    if (isType(action, apiAction.started)) {
      count = count + 1;
    } else if (
      isType(action, apiAction.failed) ||
      myIsType(action, apiAction.done)
    ) {
      count = count - 1;
    }
  });
  return count;
}

This works great, let's release the current master as 3.0.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

n/t

see #22

Hello, I'm a big fan of this library. Thank you for creating it!

I've written a package, typescript-fsa-reducers, which builds on top of typescript-fsa to simplify writing reducers. I wanted to bring it to your attention in case you're interested in adding it to the "Companion Packages" section of your README. If not, no hard feelings, and thanks again for the work you've done.

Hi,
I have the following:

interface ILanguage {
  first: string
  second?: string
}
const actionCreator = actionCreatorFactory( '[Language]' )
export const addLangAction = actionCreator.async<
    ILanguage, { success: number }, { error: number }>( 'ADD_DATA' )

export function langReducer( state: ILanguage, action: Action ) {
  if ( isType( action, addLangAction) ) {
    return action.payload
  }
  return state
}

The addLangAction generates the following error:

ERROR in language.store.ts (90,24): Argument of type 'AsyncAction
Creators<ILanguage, { success: number; }, { error: number; }>' is not assignable to parameter of type 'ActionCreator<{}>'.
  Type 'AsyncActionCreators<ILanguage, { success: number; }, { error: number; }>' provides no match for the signature '(payload
: {}, meta?: Object): Action<{}>')

@aikoven provided a solution for redux-thunk integration and I think this should be a separate package with the util + documentation. I use redux-thunk, so I can contribute to the usage documentation.

I have modified it slightly for readability and added TError generic.

import { AsyncActionCreators } from 'typescript-fsa'

// https://github.com/aikoven/typescript-fsa/issues/5#issuecomment-255347353
function wrapAsyncWorker<TParameters, TSuccess, TError>(
  asyncAction: AsyncActionCreators<TParameters, TSuccess, TError>,
  worker: (params: TParameters) => Promise<TSuccess>,
) {
  return function wrappedWorker(dispatch, params: TParameters): Promise<TSuccess> {
    dispatch(asyncAction.started(params));
    return worker(params).then(result => {
      dispatch(asyncAction.done({ params, result }));
      return result;
    }, (error: TError) => {
      dispatch(asyncAction.failed({ params, error }));
      throw error;
    });
  }
}

export default wrapAsyncWorker

I'm struggling with getting the props interface correct, especially for async actions. It would be nice if there were a simple example, showing define the actions in a connected component.

So... I was using a real payload in async .start(), and now it won't even compile, which I suppose is a good thing, since it doesn't work. Clearly this is intentional; there's even a test to make sure payloads aren't allowed.

Semver, please? If you're going to deliberately break stuff that works now, bump the major rev number.

Falling back to 2.0 for now. Please let me know if this (i.e., forbidding .start() payload) is permanent.

When I try to set a field on meta, TypeScript complains that the property does not exist.

For example:

myAction.meta.requestId = 123

>> Property 'requestId' does not exist on type 'Object'.

The current definition of meta in Action<P> looks like this:

  meta?: Object | null;

If I change it as follows, then I can place any fields into meta with no errors.

  meta?: { [x: string]: any } | null;

Of course this means meta is not type-safe, but it's no worse than the current definition.

Another alternative would be to provide a type parameter for meta (e.g., Action<P,M>), but that might be a bit of overkill for a field like meta.

Any interest in either of these changes?

It would be nice to have an examples folder with a real redux app with all the various ways this can be used and best practices, Esp async stuff.

My use case is that I'm trying to understand a codebase I've inherited and am not sure if this is a standard practice or not:

import { Site } from '../../model/Site';
import { loadSites as eventApiLoadSites } from '../../rest-api/Event-api';
import { Dispatch } from 'redux';
import { actionCreatorFactory, AnyAction } from 'typescript-fsa';
import wrapAsyncWorker from './wrapAsyncWorker';

const actionCreator = actionCreatorFactory();

export const LoadSites = actionCreator.async<null, Site[]>('LoadSites');

const loadSitesWorker =
  wrapAsyncWorker(LoadSites, (): Promise<Site[]> => eventApiLoadSites());

export const loadSites = () => {
  return (dispatch: Dispatch<AnyAction>) => loadSitesWorker(dispatch, null);
};

loadSites() is passed to an argument to store.dispatch and is giving me typing errors:

TypeScript error: Argument of type '(dispatch: Dispatch<AnyAction>) => Promise<Site[]>' is not assignable to parameter of type 'AnyAction'.

When I upgrade from 3.0.0-beta-2 to 3.0.0 I'm getting loads of

error TS2554: Expected 1-2 arguments but got 0.

for all my actionFactory<void> & actionFactory.async<void, SomeType>.

Reverting back to 3.0.0-beta-2 solves it. I'm on TypeScript 3.1.6.

I think it might be good to rename this package to typescript-fsa or fsa-typescript or something along those lines. This library can technically be used with any FSA compliant flux implementation, or even something else. For example I am currently using it in a cycle.js project.

On top of this, the redux dependency probably isn't necessary. We could reimplement the ReduxAction type in this library and be fairly certain that the API won't change as FSA is a pretty concrete interface at this point in time.

Also if you haven't seen it, should take a look at https://github.com/UrbanDoor/typed-fsa. Seems there are similar goals for both of these projects. Though I prefer this library's isType check over that other library's isAction check for narrowing, as there is no need to declare the payload again.

Thanks for all the hard work!

I'm hoping some may be inspired by this usage of typescript-fsa in my project found here https://github.com/tquinlan1992/tquinlan92-typescript-redux-utils.

It gives back a reducer and typed action creators based on the initial state passed in.

My package, typescript-fsa-redux-thunk and my attempts to refactor it have failed, and this also affects typescript-fsa-reducers. The best way to explain the errors I'm getting is to post a test case and explain where the errors are:

import {
    Dispatch,
    applyMiddleware,
    bindActionCreators,
    createStore
} from 'redux';
import thunk, { ThunkAction } from 'redux-thunk';
import actionCreatorFactory, {
    AsyncActionCreators,
    ActionCreatorFactory
} from 'typescript-fsa';
import { reducerWithInitialState } from 'typescript-fsa-reducers';

/**
 * It's either a promise, or it isn't
 */
type MaybePromise<T> = T | Promise<T>;

/**
 * A redux-thunk with the params as the first argument.  You don't have to
 * return a promise; but, the result of the dispatch will be one.
 */
export type AsyncWorker<State, Params, Result, Extra = any> = (
    params: Params,
    dispatch: Dispatch<State>,
    getState: () => State,
    extra: Extra
) => MaybePromise<Result>;

/**
 * Bind a redux-thunk to typescript-fsa async action creators
 * @param actionCreators - The typescript-fsa async action creators
 * @param asyncWorker - The redux-thunk with the params as the first argument
 * @returns a regular redux-thunk you can pass to dispatch()
 */
export const bindThunkAction = <State, P, S, E, ExtraArg = any>(
    actionCreators: AsyncActionCreators<P, S, E>,
    asyncWorker: AsyncWorker<State, P, S, ExtraArg>
) => (
    params: P
): ThunkAction<Promise<S>, State, ExtraArg> => (
    dispatch,
    getState,
    extra
) => {
    dispatch(actionCreators.started(params));
    return Promise.resolve(asyncWorker(params, dispatch, getState, extra))
        .then(result => {
            dispatch(actionCreators.done({ params, result }));
            return result;
        })
        .catch((error: E) => {
            dispatch(actionCreators.failed({ params, error }));
            throw error;
        });
};

/**
 * Factory function to easily create a typescript-fsa redux thunk
 * @param factory - typescript-fsa action creator factory
 * @returns an object with the async actions and the thunk itself
 */
export const asyncFactory = <State, E = Error, ExtraArg = any>(
    factory: ActionCreatorFactory
) => <P, S>(type: string, fn: AsyncWorker<State, P, S, ExtraArg>) => {
    const actions = factory.async<P, S, E>(type);
    return {
        async: actions,
        action: bindThunkAction(actions, fn)
    };
};

/**
 * Passing the result of this to bindActionCreators and then calling the result
 * is equivalent to calling `store.dispatch(thunkAction(params))`. Useful for
 * when you pass it to `connect()` as the actionCreators map object.
 * @param thunkAction - The thunk action
 * @returns thunkAction as if it was bound
 */
export const thunkToAction = <P, R, S, ExtraArg>(
    thunkAction: (params: P) => ThunkAction<R, S, ExtraArg>
): ((params: P) => R) => thunkAction as any;


/****** TEST CODE ******/

interface SomeState {
    hmm: number;
}

const create = actionCreatorFactory('something');
const createAsync = asyncFactory<SomeState>(create);
const someAction = create<string>('SOME_ACTION');

const test = createAsync<{ arg: string; }, number>(
    'ASYNC_ACTION',
    async params => {
        console.log(params);
        return 100;
    }
);

const initial: SomeState = {
    hmm: 0
};

const reducer = reducerWithInitialState(initial)
    .case(someAction, state => state)
    .case(test.async.started, state => state)
    .case(test.async.failed, state => state)
    .case(test.async.done, (state, { result }) => ({
        ...state,
        hmm: result
    }));

if (module === require.main) {
    const store = createStore(reducer, applyMiddleware(thunk));

    const actions = bindActionCreators({
        test: thunkToAction(test.action)
    }, store.dispatch);

    actions.test({ arg: 'test' })
        .then(result => console.log(result))
        .catch(err => console.log(err));
}

There are only three errors, and interestingly, all occurring inside of my bindThunkAction function where the async actions are called:

// Line 46:
dispatch(actionCreators.started(params));
// Cannot invoke an expression whose type lacks a call signature. Type '({ type: string; match: (action: AnyAction) => action is Action<P>; } & ((payload?: P | undefined...' has no compatible call signatures.

// Line 49:
dispatch(actionCreators.done({ params, result }));
// Argument of type '{ params: P; result: S; }' is not assignable to parameter of type 'Optionalize<{ params: P; result: S; }>'.
//  Type '{ params: P; result: S; }' is not assignable to type '{ [P in (P extends undefined ? never : "params") | (S extends undefined ? never : "result")]: { p...'.

// Line 53:
dispatch(actionCreators.failed({ params, error }));
// Argument of type '{ params: P; error: E; }' is not assignable to parameter of type 'Optionalize<{ params: P; error: E; }>'.
//  Type '{ params: P; error: E; }' is not assignable to type '{ [P in (P extends undefined ? never : "params") | (E extends undefined ? never : "error")]: { pa...'.

I've been fiddling with my own code for hours, and I can't seem to figure out why this is happening. Passing normal parameters to these action creators outside of bindThunkAction works fine.

Another weirdness: even with these errors, the reducer seems to work; but, the types of params and result, etc have a weird optional-like, for example: number | { undefined & number }.

If one ignores the errors and runs the code with ts-node, it executes without errors. Am I losing it?

flux-standard-action has its own typing. Would this library able to consume and compatible with it?

The main difference is that it separates FSA and ErrorFSA, and FSA takes two generics FSA<Payload, Meta>.

🌷

Trying to use this, but my async actions will return the result type as the payload, rather than under action.payload.result
When I use isType(action, someaction.done) payload is now typed to be ActionCreator<Success<P, S>> so according to typescript, I need to grab the actual api result from action.payload.result
I'm using middleware, so cant easily change this just for the files I am using this on. is there a way round this?

Hi, I've just tried updating to TS 3.0.1 and ts-fsa 3.0.0-beta-2, i previously had this generic reducer...

const mergeResultIntoIndex = <T extends Identified>(state: Indexed<T>, {result}: Success<any, T>): Indexed<T> => {
    return {
        ...state,
        [result.id]: result
    }
}

where:

export interface Identified {
    readonly id: string
}

export type Indexed<V> = { [id: string]: V }

but now i'm seeing the error:

TS2418: Type of computed property's value is 'T | undefined', which is not assignable to type 'T'.

for the line:

        [result.id]: result

I would appreciate the ability to add an optional parameter for mapping the values of an action's payload. This would be useful, for example, for dispatching notifications and assigning them a UUID in the action itself.

My current work-around is the following wrapper function:

import { Action, AnyAction, Meta } from 'typescript-fsa'

// Copy-pasted from typescript-fsa, with Overload edits
type ActionCreator<Payload, Overload = Payload> = {
  type: string
  match: (action: AnyAction) => action is Action<Overload>
  (payload: Payload, meta?: Meta): Action<Overload>
} & (Payload extends void
  ? (payload?: Payload, meta?: Meta) => Action<Overload>
  : {})

function mapActionCreatorPayload<P extends {}, O extends {} = P>(
  actionCreator: ActionCreator<P>,
  mapPayload: (payload: P) => O
) {
  const action = (payload: P): Action<ReturnType<typeof mapPayload>> => ({
    type: actionCreator.type,
    payload: mapPayload(payload)
  })

  const overload = Object.assign(action, {
    type: actionCreator.type,
    match: actionCreator.match
  })

  // Type 'Payload' is not comparable to type 'Overload'
  return (overload as unknown) as ActionCreator<
    P,
    ReturnType<typeof mapPayload>
  >
}

The usage is then:

const actionCreator = actionCreatorFactory('notifications')
const addAction = actionCreator<NotificationWithoutId>('ADD')

export const addNotification = mapActionCreatorPayload(
    addAction,
    (notification): NotificationWithId => ({
      ...notification,
      id: uuid()
    })
  )

This works perfectly in the sense that addNotification doesn't accept and id key in its argument payload (NotificationWithoutId), but the resulting payload in Redux will contain the id (NotificationWithId).

I think this would be an useful optional feature right in TypeScript-FSA.

Hi,
I'm trying to provide typings for my actions inside a connected component.

interface IDispatchProps {
  setName: typeof setName // where setName is an imported action
}

Given that the action is defined as:

export const setName = actionCreator<string>('SET_NAME');

The idea is to use those typings when defining mapDispatchToProps:

const mapDispatchToProps = (dispatch): IDispatchProps => ({
  setName: (name:string) =>dispatch(setName(name))
})

However I get an error about the typings being incompatible. Is there a way to get the type of that action?

Hello there 👋,

I would like to thank your for this project and your time invested in this project,

I just rewrote a project in TS and I was handling everything with Enums and custom utilities,

Looking for good patterns, I landed in this repo, all the *-fsa-* packages are awesome!

The code looks more tidy and organized!

Many thanks 🙏

error info:

(property) AsyncActionCreators<string, void, Error>.done: {
    (payload: Success<string, void>, meta?: {
        [key: string]: any;
    } | null | undefined): Action<Success<string, void>>;
    type: string;
    match: (action: AnyAction) => action is Action<Success<string, void>>;
}

Argument of type '{ (payload: Success<string, void>, meta?: { [key: string]: any; } | null | undefined): Action<Success<string, void>>; type: string; match: (action: AnyAction) => action is Action<Success<string, void>>; }' is not assignable to parameter of type '{ (payload: { params: string; } & { result: void; }, meta?: { [key: string]: any; } | null | undefined): Action<{ params: string; } & { result: void; }>; type: string; match: (action: AnyAction) => action is Action<{ ...; } & { ...; }>; }'.
  Types of property 'match' are incompatible.
    Type '(action: AnyAction) => action is Action<Success<string, void>>' is not assignable to type '(action: AnyAction) => action is Action<{ params: string; } & { result: void; }>'.
      Type predicate 'action is Action<Success<string, void>>' is not assignable to 'action is Action<{ params: string; } & { result: void; }>'.
        Type 'Action<Success<string, void>>' is not assignable to type 'Action<{ params: string; } & { result: void; }>'.
          Type 'Success<string, void>' is not assignable to type '{ params: string; } & { result: void; }'.
            Type '{ params: string; } & { result?: void | undefined; }' is not assignable to type '{ params: string; } & { result: void; }'.
              Type '{ params: string; } & { result?: void | undefined; }' is not assignable to type '{ result: void; }'.
                Property 'result' is optional in type '{ params: string; } & { result?: void | undefined; }' but required in type '{ result: void; }'.

ts(2345)

errata code:

if params is void returns never?

if result is void returns never?

diff --git a/src/index.ts b/src/index.ts
index 5e99796..e1dc9dc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -82,11 +82,11 @@ export type ActionCreator<Payload> = {
 );

 export type Success<Params, Result> =
-  ({params: Params} | (Params extends void ? {params?: Params} : never)) &
-  ({result: Result} | (Result extends void ? {result?: Result} : never));
+  ({params: Params} | (Params extends void ? never : {params?: Params})) &
+  ({result: Result} | (Result extends void ? never : {result?: Result}));

 export type Failure<Params, Error> =
-  ({params: Params} | (Params extends void ? {params?: Params} : never)) &
+  ({params: Params} | (Params extends void ? never : {params?: Params})) &
   {error: Error};

 export interface AsyncActionCreators<Params, Result, Error = {}> {

Example code

fsa-issue.zip

$ unzip fsa-issue.zip
$ cd fsa-issue
$ npm install
$ npm test

> fsa-issue@ test /Users/septs/Projects/fsa-issue
> tsc --noEmit

issue.ts:8:6 - error TS2345: Argument of type '{ (payload: Success<unknown, void>, meta?: { [key: string]: any; } | null | undefined): Action<Success<unknown, void>>; type: string; match: (action: AnyAction) => action is Action<Success<unknown, void>>; }' is not assignable to parameter of type 'ActionCreator<void>'.
  Type '{ (payload: Success<unknown, void>, meta?: { [key: string]: any; } | null | undefined): Action<Success<unknown, void>>; type: string; match: (action: AnyAction) => action is Action<Success<unknown, void>>; }' is not assignable to type '{ (payload: void, meta?: { [key: string]: any; } | null | undefined): Action<void>; type: string; match: (action: AnyAction) => action is Action<void>; }'.
    Types of property 'match' are incompatible.
      Type '(action: AnyAction) => action is Action<Success<unknown, void>>' is not assignable to type '(action: AnyAction) => action is Action<void>'.
        Type predicate 'action is Action<Success<unknown, void>>' is not assignable to 'action is Action<void>'.
          Type 'Action<Success<unknown, void>>' is not assignable to type 'Action<void>'.
            Type 'Success<unknown, void>' is not assignable to type 'void'.
              Type '{ params: unknown; } & { result: void; }' is not assignable to type 'void'.

8 test(async.done)

npm ERR! Test failed.  See above for more details.

Why void with Result?

typescript-fsa-redux-thunk in NO RETURN async procedure

const doThing = createAsyncAction("DO_THING", async () => { return; });

// doThing.async.done
// The result of the reasoning type is:
//      Action<Success<unknown, void>>

see xdave/typescript-fsa-redux-thunk#17
see xdave/typescript-fsa-redux-thunk#14

Hi,
Interesting offering. Congrats.

Can it be used with @ngrx/store https://github.com/ngrx/store

If so, an example please.

Thanks

Version 3.0.5 of ts-node just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As ts-node is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Here's a rough example:

// actions.ts
import actionCreatorFactory from 'typescript-fsa';
const actionCreator = actionCreatorFactory('tasks');
export const allDone = actionCreator('MARK_ALL_DONE');
export const markDone = actionCreator<number>('MARK_DONE');

// Tasks.tsx
interface ITasksProps = {
  allDone: () => void;
  markDone: (taskId: number) => void;
}
...

// TasksContainer.tsx
import Tasks from './Tasks'
import { allDone, markDone } from './actions';
...
const mapDispatchToProps = {
  allDone,
  markDone,
};

connect(null, mapDispatchToProps)(Tasks);

Here's an error:

Type 'ActionCreator<void>' is not assignable to type '() => void'.  TS2345

To fix it, I have to change this:

  allDone: () => void;

To this:

  allDone: (payload: void) => void;

Which is stupid.

how to handle default params in async action creator?

const asyncAction =ac.async<Params | underfined, Result, Error>('async')

// [ts] Expected 1-2 arguments, but got 0.
asyncAction.started()

I want started() method parameter be optional. I try to make it Params | void but it doesn't work as expect.

The current workaround is to modify the index.d.ts file

export declare type ActionCreator<Payload> = {

  // add the following declaration
  (payload?: Payload, meta?: Meta): Action<Payload>;

}

Is there a better way to accomplish that?

How could I do something like the following in typescript-fsa?

interface AddTodoInputPayload {
   name: string
}

interface AddTodoPayload extends AddTodoInputPayload {
   type: 'ADD_TODO',
   id: string
}
const addTodoAction = (payload: AddTodoInputPayload): AddTodoPayload => ({...payload, type: 'ADD_TODO',  id: uuid.v4()})

I know the type is added automatically and all, but I want to be able to augment/modify the passed payload, is this possible? I'd also like to preserve composability with typescript-fsa-reducers.

Hi,

I just copy and pasted your example but can't seem to get around the duplicate identifier I'm seeing;

// reducer.ts
import {Action} from 'redux';
import {isType, Action} from 'redux-typescript-actions';

Am I doing something wrong?

Not sure if this is related to #51 or #32, but I have issues with typescript-fsa in connection to react-redux' connect and class components.

In the following example, the class component version does not compile, but the functional component version does:

import * as React from 'react';
import actionCreatorFactory, { ActionCreator } from 'typescript-fsa';
import { connect } from 'react-redux';

interface Props {
  doSomething: (thing: string) => void;
}
class MyComponent extends React.Component<Props> {
  render() {
    return <button onClick={() => this.props.doSomething('test')}/>;
  }
}
const MyFunctionalComponent = (props: Props) => <button onClick={() => props.doSomething('test')}/>;

const createActionCreator = actionCreatorFactory();
const doSomething = createActionCreator<string>('DO_SOMETHING');

const mapDispatchToProps = {
  doSomething,
};
connect(null, mapDispatchToProps)(MyComponent); // error: Argument not assignable
connect(null, mapDispatchToProps)(MyFunctionalComponent); // works

Both work if I declare Props as

interface Props {
  doSomething: ActionCreator<string>;
}

But I obviously do not want to couple the component to redux-specific stuff. Using typescript 2.8 and the most up-to-date version of all packages. Any ideas?

Hello, thanks for the library!

I've got a question regarding async action creator. What if my action should receive no params?

export const FETCH_TEAMS = 'FETCH_TEAMS';
const fetchTeams = actionCreator.async<
	{}, // <- here, how can we specify to be optional?
	Array<Team>,
	AxiosError
>(FETCH_TEAMS);

// how i can handle it how
fetchTeams.started({});
fetchTeams.done({
  result: teams,
  params: {}
});

// how it would be nice to handle, but now i see errors in this case
fetchTeams.started();
fetchTeams.done({
  result: teams
});

Thanks in advance!

Hi there-

Issue: I am unable to pass a TypeScript Type for the meta object that an actionCreator produces.

Example:
I want to create async actions for an event "login":

interface LogInData { email: string }
interface LogInResponseData { token: string }
interface LogInErrorData { error: string }

const logIn = actionCreator.async<LogInData, LogInResponseData, LogInErrorData>('LOGIN');

I also want to pass data via the meta object on the action.

dispatch(login.started({email: '[email protected]'}, {info: true}))

I now want to define what my action will look like, as well as create the saga:

import {Action} from 'redux';

interface LoginAction extends Action {
  meta: { info: boolean }
}

export function* loginFunc(action: LoginAction) {
  ...irrelevant
}

takeEvery(logIn.started,loginFunc),

The issue arises when you try to test the code:

const startAction = logIn.start({email: '[email protected]'}, {info: true})

loginFunc(startAction)

startAction will throw a TypeScript error because its meta property has a different definition than that of LoginAction

My suggestion would be to add something like:

const logIn = actionCreator.async<LogInData, LogInResponseData, LogInErrorData, MetaData>('LOGIN');

thank you for cool library!
so. i created companion package for redux-observable.

I've recently updated to TS3, and although [email protected] isn't currently working for me (reported in a separate issue), i'm continuing to use 2.5.0.

I have found that the new unknown type is incredibly useful as the payload type of an Action, especially in combination with redux-observable, and the ofAction operator (see m0a/typescript-fsa-redux-observable#6).

With this introduction of unknown, and some refactoring it's become clear to me that all of my use case of AnyAction should really be Action<unknown>, and I find I now have Action<unknown> appearing all over the place. This is making me think that unknown should be the default payload type, and there really is no place for AnyAction in well typed code.

I'm wondering whether it would be appropriate for Action type declaration to default its payload type param to unknown (obviously backwards compatibly would need to be accounted for).

This may just be due to my use-cases and usage of redux-observable Epics, and the narrowing effect of the ofAction from Action<unknown> to Action<P>. I'm not sure if it would be appropriate for users of thunk, saga, or other non-redux based uses.

From the flux-standard-action repo:

Flux actions can be thought of as an asynchronous sequence of values. It is important for asynchronous sequences to deal with errors. Currently, many Flux implementations don't do this, and instead define separate action types like LOAD_SUCCESS and LOAD_FAILURE. This is less than ideal, because it overloads two separate concerns: disambiguating actions of a certain type from the "global" action sequence, and indicating whether or not an action represents an error. FSA treats errors as a first class concept.

Was there a particular reasoning to do it with *_DONE/*_FAILED?

When running in the browser, process is undefined. A workaround is to define window.process = { env: { NODE_ENV: 'mycurrentenvironment' }}. It is conceivable that a common use case for typsecript-fsa is SPAs running in the browser, so this workaround should not be needed.

This is probably a design problem with typescript-fsa and async actions. I'm using a pattern such as the following:

 const LoginActions = {
  syncAction: actionCreator<UserDetails>('USER_DETAILS_SET'),
  asyncAction: actionCreator.async<{phoneNumber: string}, {newAccountValid: boolean}>('CONFIRM_PHONE')
}

class LoginScreen extends Component<typeof LoginActions> {
  render() {
  }

  someButtonClicked = () => {
    this.props.syncAction({...}); // works properly
    this.props.asyncAction.started({...}); // undefined is not an object.. evaulating .started
  }
}

export default connect({}, LoginActions)(LoginScreen);

I understand why this happens, it's because the connect() call can see that syncAction is indeed a function and properly maps the dispatch, but asyncAction is an object with .started(), .done() functions defined within it, so it is ignored in the mapping by the connect() call.

Is there something simple I'm overlooking to get this pattern working with async actions?

Given the changes with ngrx 4, is typescript-fsa still compatible? There are changes with Actions (for example, there is no payload property). How does this impact on this package?

See migration guide at https://github.com/ngrx/platform/blob/master/MIGRATION.md

Thanks

interface Foo {
  bar: boolean
}

const INITIAL_STATE: Foo = {
  bar: true
}

const reducer = reducerWithInitialState(INITIAL_STATE).case(someAction, (state, payload) => {
  return {bar: true, SHOULDNT_ALLOW_THIS: true};
})

Following code typechecks, when SHOULDNT_ALLOW_THIS should throw a typecheck error.

I was trying to do the following

import * as actions from '../actions/actions';
import {ActionCreatorsMapObject} from "redux";

export default connect(state => state, (dispatch) => {
  return bindActionCreators(actions, dispatch);
})(someComponent);

and I got the following error

 error TS2345: Argument of type 'typeof ".../actions/actions"' is not assignable to parameter of type 'ActionCreatorsMapObject'.

as a workaround i had to do

import * as actions from '../actions/actions';
import {ActionCreatorsMapObject, bindActionCreators} from "redux";

export default connect(state => state, (dispatch) => {
  return bindActionCreators(actions as any as ActionCreatorsMapObject, dispatch);
})(temp);

or alternatively

import * as actions from '../actions/actions';
import {ActionCreatorsMapObject, bindActionCreators} from "redux";

export default connect(state => state, (dispatch) => {
  return bindActionCreators({...actions}, dispatch);
})(temp);

I am not sure if it is a mismatch of type signatures or the typescript module system

Hi,

Firstly thanks for the library, it's proved very useful for me.

I just wanted to provide a small suggestion and get your thoughts on it.

One of the useful functions in ActionCreatorFactory is:
async<P, S, E>(type: string, commonMeta?: Meta): AsyncActionCreators<P, S, E>;

Which creates started, done, failed action creators. Would it not also be useful if it was to create a reset action creator that allows us to handle a reset action for resetting the async operation state to the initial one. I can create one manually, but I thought it would be nicer if the current function did that alongside the other action creators.

A reset action creator can become useful in the following scenario. I have the following state for an API operation:

interface IAPIOperation {
  pending: boolean;
  success: boolean;
  failure: boolean;
}

When I receive started, I set IAPIOperation.pending to true, and when I receive done, I set IAPIOperation.success to true, etc.

In my React container I watch for IAPIOperation.success to be true, and when it is, I redirect to another page. The issue is if I visit the page for that container again, it will detect that IAPIOperation.success is still true, and keep redirecting me. A reset would prevent that. Unless there is a nicer way of preventing that without the need for a reset.

Thanks

Is there a way to skip params in async action results? Something like:

    done: ActionCreator<S>;
    failed: ActionCreator<E>;

Let's say I want to fetch all users. This is kind of what I expected: (pseudocode)

dispatch fetchingAllUsers.started();
// do the fetching
if (error) {
    fetchingAllUsers.failed({ error: error.message });
} else {
    fetchingAllUsers.done({ users: users[] });
}

I'm mostly new to all this so I was wondering if I'm missing something or if there's a better way to utilize this library.

Thanks!