I have a problem when I use a createActions, if only use createAction all works but if i try to use createActions the app show me a error ....
Unhandled Rejection (TypeError): Object(...) is not a function
In all my functions that has a dispatch method, only works with createAction
import { createAction, createActions } from 'redux-actions'
// Types
import { ADD_TASK } from '../types/todo.types'
import { SHOW_TASKS } from '../types/todo.types'
// export const addTaskAction = createAction(ADD_TASK)
// export const showAllTasksAction = createAction(SHOW_TASKS)
// * Refactor to createActions
export const { addTaskAction, showAllTasksAction } = createActions(
ADD_TASK,
SHOW_TASKS,
)
Unhandled Rejection (TypeError): Object(...) is not a function
_callee$
src/shared/routes/private/PrivateRoutes.routes.js:19
16 | getAllTasks()
17 | }, [])
18 |
> 19 | async function getAllTasks() {
| ^ 20 | const result = await todo.getAllTasks()
21 | return dispatch(showAllTasksAction(result))
22 | }
The same happened to me and the issue was that the constants need to match the actions (with camelcase) that way the createActions function can match the action with the string
Related
Ionic 6 app using capacitor-community/sqlite#3.4.2-3.
Creating connection with
await CapacitorSQLite.createConnection({database:DBNAME,version:DB_VERSION,encrypted:false,mode:"secret"});
I get the following error:
"While parsing a protocol message, the input ended unexpectedly in the middle of a field. This could mean either that the input has been truncated or that an embedded message misreported its own length."
Using 3.4.0 version with same code, the error is:
"Error: Query: Attempt to invoke virtual method 'com.getcapacitor.JSArray com.getcapacitor.community.database.sqlite.CapacitorSQLite.query(java.lang.String, java.lang.String, com.getcapacitor.JSArray)' on a null object reference"
any ideas?
thanks
I am facing 2 million issues but I think you have put a superfluous curly bracket {} in your constructor call and you are calling the object directly.
const db = await this.sqlite.createConnection(this.dbname, true, 'encryption', 1, false); :
where this.sqlite is initiated in the constructor to a service (angular) with a call to initializePlugin
initializePlugin(): Promise<boolean> {
return new Promise(resolve => {
this.platform = Capacitor.getPlatform();
if (this.platform === 'ios' || this.platform === 'android') {
this.native = true;
}
this.sqlite = new SQLiteConnection(CapacitorSQLite);
resolve(true);
});
}
You may also need the following in your import statement:
import { Injectable } from '#angular/core';
import { Capacitor } from '#capacitor/core';
import {
CapacitorSQLite, SQLiteConnection,
capEchoResult
} from '#capacitor-community/sqlite';
import { Platform } from '#ionic/angular';
At least, it works for me.
I can't get item from Firebase Realtime Database with Axios and NestJS.
My code is:
import { Injectable } from '#nestjs/common';
import { HttpService } from '#nestjs/axios';
import { Observable } from 'rxjs';
import { AxiosResponse } from 'axios';
#Injectable()
export class AppService {
constructor(private httpService: HttpService) {}
async getHello(): Promise<Observable<AxiosResponse<any>>> {
const data = await this.httpService.get(
'[my firebase url.]',
).pipe();
return data;
}
}
I get this error:
[Nest] 5104 - 01.11.2021 20:28:19 ERROR [ExceptionsHandler] Converting circular structure to JSON
--> starting at object with constructor 'ClientRequest'
| property 'socket' -> object with constructor 'TLSSocket'
--- property '_httpMessage' closes the circle
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'ClientRequest'
| property 'socket' -> object with constructor 'TLSSocket'
--- property '_httpMessage' closes the circle
at JSON.stringify (<anonymous>)
at stringify (C:\Users\Faruk\Desktop\projects\fbase\node_modules\express\lib\response.js:1123:12)
at ServerResponse.json (C:\Users\Faruk\Desktop\projects\fbase\node_modules\express\lib\response.js:260:14)
at ExpressAdapter.reply (C:\Users\Faruk\Desktop\projects\fbase\node_modules\#nestjs\platform-express\adapters\express-adapter.js:32:57)
at RouterResponseController.apply (C:\Users\Faruk\Desktop\projects\fbase\node_modules\#nestjs\core\router\router-response-controller.js:14:36)
at C:\Users\Faruk\Desktop\projects\fbase\node_modules\#nestjs\core\router\router-execution-context.js:175:48
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at C:\Users\Faruk\Desktop\projects\fbase\node_modules\#nestjs\core\router\router-execution-context.js:47:13
at C:\Users\Faruk\Desktop\projects\fbase\node_modules\#nestjs\core\router\router-proxy.js:9:17
Looks like you aren't mapping the response at all. Axios responses are, by definition, circular, so you need to return only the part of the response you need. Most of the time, this is simply just return this.httpService.get(url).pipe(map((resp) => resp.data))
could someone please help me to resolve this issue; I have upgraded the ngrx version on my Angular app from version 7 to 10, then when I have tried to launch the application i got this error :
Overload 1 of 8, '(mapFn: (state: unknown, props: unknown) => unknown, props?: unknown): (source$: Observable<unknown>) => Observable<unknown>', gave the following error.
Argument of type '"userDetails"' is not assignable to parameter of type '(state: unknown, props: unknown) => unknown'.
Overload 2 of 8, '(key: never): (source$: Observable<unknown>) => Observable<never>', gave the following error.
Argument of type '"userDetails"' is not assignable to parameter of type 'never'.
The code were compiled on the Version 7 :
import { select } from '#ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';
export const selectuserDetails = pipe(
select('userDetails'),
filter(uds => uds && uds.isFetched)
);
What shall i change to fix this issue please, and compile this code on the version 10!
Thank you.
You are passing a string to select(). Instead, import you selector and pass that:
import { select } from '#ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';
import * as MySelectors from 'path/to/selectors'
export const selectuserDetails = pipe(
select(MySelectors.userDetails),
filter(uds => uds && uds.isFetched)
);
Here is the relevant page in the docs:
https://ngrx.io/guide/store/selectors
I've got a state in my Redux store shaped like this:
type RootState = {
PAGE_A: StatePageA,
PAGE_B: StatePageB,
PAGE_C: StatePageC,
// AND SO ON...
}
Each page is a slice created with createSlice from #reduxjs/toolkit
I'm using Next.js static generation and SSR, so I need to hydrate my previously created store with the new state that comes form subsequent pages from the Next.js server.
Whatever page I'm routing to, I'll get the pre-rendered pageState, which should by of type StatePageA | StatePageB | StatePageC.
When that new state comes, I need to dispatch() a HYDRATE_PAGE action, which should replace the current page state.
This was my first idea on how to handle the HYDRATE_PAGE action.
export const HYDRATE_PAGE = createAction<{
pageName: "PAGE_A" | "PAGE_B" | "PAGE_C",
pageState: StatePageA | StatePageB | StatePageC
}>("HYDRATE_PAGE");
Then I would have to listen for it in every slice:
// EX: PAGE_A SLICE
// THIS WOULD HAVE TO BE DONE FOR EACH SLICE ON THE extraReducers PROPERTY
extraReducers: {
[HYDRATE_PAGE]: (state, action) => {
if (action.payload.pageName === "PAGE_A")
return action.payload.pageState
}
}
Is there a way where I can handle it in a centralized manner, without having to listen for that action in every slice reducer?
For example: a rootReducer kind of thing where I could listen for the HYDRATE_PAGE action and handle it in a single place like.
// THIS REDUCER WOULD HAVE ACCESS TO THE rootState
(state: RootState, action) => {
const {pageName, pageState} = action.payload;
state[pageName] = pageState;
};
Is this possible somehow?
Extra
There is this package called next-redux-wrapper, but I don't intent to use it. I'm trying to build my custom solution.
Overview of Concept
I'm not sure that your store has the best design because generally you want data to be organized by what type of data it is rather than what page it's used on. But I'm just going to answer the question as it's presented here.
A reducer is simply a function that takes a state and an action and returns the next state. When you combine a keyed object of slice reducers using combineReducers (or configureStore, which uses combineReducers internally), you get a function that looks like:
(state: RootState | undefined, action: AnyAction) => RootState
We want to create a wrapper around that function and add an extra step that performs the HYDRATE_PAGE action.
Typing the Action
export const HYDRATE_PAGE = createAction<{
pageName: "PAGE_A" | "PAGE_B" | "PAGE_C",
pageState: StatePageA | StatePageB | StatePageC
}>("HYDRATE_PAGE");
The typescript types that you have in your action creator aren't as good as they can be because we want to enforce that the pageName and pageState match each other. The type that we actually want is this:
type HydratePayload = {
[K in keyof RootState]: {
pageName: K;
pageState: RootState[K];
}
}[keyof RootState];
export const HYDRATE_PAGE = createAction<HydratePayload>("HYDRATE_PAGE");
Which evaluates to a union of valid pairings:
type HydratePayload = {
pageName: "PAGE_A";
pageState: StatePageA;
} | {
pageName: "PAGE_B";
pageState: StatePageB;
} | {
pageName: "PAGE_C";
pageState: StatePageC;
}
Modifying the Reducer
First we will create the normal rootReducer with combineReducers. Then we create the hydratedReducer as a wrapper around it. We call rootReducer(state, action) to get the next state. Most of the time we just return that state and don't do anything to it.
But if the action matches our HYDRATE_PAGE action then we modify the state by replacing the state for that slice with the one from our payload.
const rootReducer = combineReducers({
PAGE_A: pageAReducer,
PAGE_B: pageBReducer,
PAGE_C: pageCReducer
});
const hydratedReducer = (state: RootState | undefined, action: AnyAction): RootState => {
// call the reducer normally
const nextState = rootReducer(state, action);
// modify the next state when the action is hydrate
if (HYDRATE_PAGE.match(action)) {
const { pageName, pageState } = action.payload;
return {
...nextState,
[pageName]: pageState
};
}
// otherwise don't do anything
return nextState;
}
const store = configureStore({
reducer: hydratedReducer,
});
I am following a tutorial which is clearly outdated. But I tried my best to follow up with the migration guide but I am still stuck with this one little error.
import { Injectable } from '#angular/core';
import { AngularFireList, AngularFireObject, AngularFireDatabase } from 'angularfire2/database';
import { ExpenseModel } from './expense-model';
#Injectable()
export class ExplistService {
private basePath = '/UD';
explist: AngularFireList<ExpenseModel[]> = null; // list of objects
exp: AngularFireObject<ExpenseModel> = null;
createExpenseModel(exp: ExpenseModel): void {
this.explist.push(exp)
.catch(error => this.handleError(error));
}
I am getting the error at the line
this.explist.push(exp)
Argument of type 'ExpenseModel' is not assignable to parameter of type
'ExpenseModel[]'. Property 'includes' is missing in type
'ExpenseModel'.