Comments (4)
store/session/action.ts
import { createAction } from "typesafe-actions";
import { MiddlewareFlags } from "@client/store/middleware";
import { AuthTokens } from "@client/store/session/models";
export const loginPending = createAction(
"session.loginPending",
resolve => (flags: MiddlewareFlags) => resolve(undefined, flags)
);
export const loginSuccess = createAction(
"session.loginSuccess",
resolve => (tokens: AuthTokens, flags: MiddlewareFlags) => resolve(tokens, flags)
);
export const loginFailure = createAction(
"session.loginFailure",
resolve => (error: Error, flags: MiddlewareFlags) => resolve(error, flags)
);
/*
* as opposed to (this is better, don't use my example above unless you need to declare meta):
*
* export const loginAsync = createAsyncAction(
* "session.login_request",
* "session.login_success",
* "session.login_failure"
* )<void, models.AuthTokens, Error>();
*/
//...
store/session/async-actions.ts
// ...
export const login = (usernameOrEmail: string, password: string, remember: boolean): StoreAsyncAction => async (dispatch: StoreDispatcher, getState: () => StoreState, api: API): Promise<void> => {
dispatch(actions.loginPending({
showLoader: "progress.logging_in"
}));
try {
const authTokens: AuthTokens = await api.auth.authenticate(
usernameOrEmail,
password,
remember
);
api.auth.cacheLocalSession(authTokens);
dispatch(actions.loginSuccess(authTokens, {
showLoader: false
}));
} catch (err) {
dispatch(actions.loginFailure(<Error>err, {
showLoader: false
}));
}
};
// ...
Here's what I did. Rather than using createAsyncAction
, I created normal actions which will be called in the thunk action, so I can add the meta object.
If anyone's curious to what this is doing, I've setup a couple of middleware (functions that eavesdrop on / intercept every action sent to the store. If an action contains a ui flag in its meta property, the middleware will fire an action to the store to toggle that UI.
For reference:
https://github.com/gerardmrk/xo/blob/master/src/client/store/middleware.ts#L29
Hope this helps
from typesafe-actions.
Could you describe what is this meta property?
from typesafe-actions.
With the standard synchronous action, you're able to specify a mandatory type, an optional payload, and an optional meta payload. Judging from the typings and the documentations, you're not able to specify an optional meta payload for async actions. That's okay though, I realize I can just declare all the standard request
, success
, and failure
actions and just use that with my custom async function, so I'll just close this issue. Thanks for this package btw it really helps
from typesafe-actions.
@gerardmrk Thanks for explanation now I understood your issue.
It would be possible to add an overloaded createAsyncAction, that would accept 6 type parameters but that would be really mouthful and I think only a few % of user would really use it. Could you post a snippet of your solution to this problem? Perhaps someone in the future may end up here so he could benefit from your help :)
from typesafe-actions.
Related Issues (20)
- Can I use createAction with a static meta in a way that createReducer.handleAction allows?
- isActionOf - Argument contains array with invalid element at index 0 HOT 2
- Any idea about Redux-Model
- Is it even possible to type thunks properly?
- What is the future of the project? HOT 2
- Infer action and return type from action creator HOT 1
- Access state in createAsyncAction HOT 1
- [5.1] handleAction throws error in test environment using AVA
- Using RootAction makes TypeScript compilation and vscode intellisense extremly slow HOT 1
- Suggestion for safer redux-saga types with typed-redux-saga
- Wrong Documentation HOT 1
- Error: 'createAction' is not exported by typesafe-actions.umd.production.js
- Import declaration conflicts with local declaration of 'RootState'.
- Documentation for polymorphic action
- handleAction allows return object with properties not pesent in the state type HOT 2
- Request: Change branch name master to main
- Why createReducer's handleAction exclude InputAction and HandledAction?
- The result type of createReducer is any instead of Reducer HOT 2
- Allow createReducer to be used without initial state HOT 6
- Error After upgrade from Angular 13 to 14 (A type annotation is necessary) HOT 1
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 typesafe-actions.