I try to define my component props where type is Array
But it not working...
import { Person } from '...'
export default defineComponent({
props: {
people: Array<Person>
}
})
export class Person {
...
}
How to declare it correctly ?
use Proptype imported from 'vue'
import { Person } from '...'
import { defineComponent, PropType } from 'vue';
export default defineComponent({
props: {
people: Array as PropType<Array<Person>>,
default: undefined,
}
})
Typeof a class is function. When declaring a function prop with options-api its required to have a default.
With composition-api you can do it like this:
import { Person } from '...';
const props = defineProps({
people: Person
})
Alternative solution(options-api):
import { Person } from '...';
props: {
people: {
default: () => Person,
},
},
Related
I am doing a NextJS project using next-redux-wrapper, redux/toolkit and redux-saga.
This is my setup:
store/enquiry/slice.ts:
import { PayloadAction, createSlice } from '#reduxjs/toolkit'
import { HYDRATE } from 'next-redux-wrapper';
export enum LoadingTracker {
NotStarted,
Loading,
Success,
Failed
}
type EnquiryState = {
enquiries: Enquiry[],
loadingTracker: LoadingTracker
}
const initialState: EnquiryState = {
enquiries: [],
loadingTracker: LoadingTracker.NotStarted
}
export const enquirySlice = createSlice({
name: 'enquiries',
initialState,
reducers: {
//#ts-ignore
loadEnquiries: (state, action: PayloadAction<Enquiry[]>) => {
state.enquiries = action.payload;
state.loadingTracker = LoadingTracker.Success
},
failedLoadEnquiries: (state) => {
state.loadingTracker = LoadingTracker.Failed;
},
startedLoadingEnquiries: (state) => {
state.loadingTracker = LoadingTracker.Loading;
}
},
extraReducers:{
[HYDRATE]:(state, action) => {
return{
...state,
...action.payload.enquiry
};
}
},
});
export const { loadEnquiries, failedLoadEnquiries, startedLoadingEnquiries } =
enquirySlice.actions;
export default enquirySlice.reducer;
This is my enquiry saga setup: sagas/enquiry/saga.ts
import { call, put, takeLatest } from "redux-saga/effects";
import { loadEnquiries, startedLoadingEnquiries, failedLoadEnquiries } from
"../../store/enquiry/slice";
export function* loadEnquiriesSaga() {
try {
//#ts-ignore
let response = yield call(() =>
fetch("https://xxxxx686888wwg326et2.mockapi.io/enqueries")
);
if (response.ok) {
//#ts-ignore
let result = yield call(() => response.json());
yield put(loadEnquiries(result));
} else {
yield put(failedLoadEnquiries());
}
} catch (e) {
yield put(failedLoadEnquiries());
}
}
export function* loadEnquiriesWatcher() {
const { type } = startedLoadingEnquiries();
yield takeLatest(type, loadEnquiriesSaga);
}
This is my root saga setup: sagas/index.js
import { all } from 'redux-saga/effects';
import { loadEnquiriesWatcher } from './enquiry/saga';
export default function* rootSaga() {
yield all([
loadEnquiriesWatcher()
])
}
this is my store setup: store/index.js
import { configureStore, getDefaultMiddleware } from '#reduxjs/toolkit'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import createSagaMiddleware from "redux-saga";
import enquiryReducer from '../store/enquiry/slice';
import { createWrapper } from 'next-redux-wrapper';
import rootSaga from '../sagas/index';
const makeStore = () => {
const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
reducer: {
enquiry: enquiryReducer,
},
middleware: [...getDefaultMiddleware({ thunk: false }), sagaMiddleware],
devTools: true
})
//#ts-ignore
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
}
const store = makeStore();
export type AppStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch
This is _app.ts file
import React, { useEffect } from "react";
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { Provider } from 'react-redux'
import { wrapper } from '../store/index';
const App = ({ Component, ...rest }: AppProps) => {
const [queryClient] = React.useState(() => new QueryClient());
const { store, props } = wrapper.useWrappedStore(rest);
const { pageProps } = props;
return (
<Provider store={store}>
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</Provider>
);
}
export default App;
I am running a getServersideProps function in pages/index.js file.
import Head from 'next/head'
import { Inter } from '#next/font/google'
import utilStyles from '../styles/Utils.module.css';
import Layout from '../components/layout';
import { wrapper } from '../store';
import { startUserLogin } from '../store/user/slice';
import { END } from 'redux-saga';
import { GetServerSideProps } from 'next';
import { startedLoadingEnquiries } from '../store/enquiry/slice';
const inter = Inter({ subsets: ['latin'] })
export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(
//#ts-ignore
(store) => async ({ req }) => {
await store.dispatch(startedLoadingEnquiries());
store.dispatch(END);
await (store as any).sagaTask.toPromise();
return {
props:{
status:1
}
}
})
export default function Home(props:any) {
return (
<Layout home>
<Head>
<title>Holiday Experts</title>
</Head>
<section className={utilStyles.headingMd}>
<p>Introduction to Holiday Exers blah blah blah............. status:
{props.status}</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>To Do: List of Top Destinatons as
cards</h2>
</section>
</Layout>
)
}
When I got to the home page localhost:3000/, I see all the state values are populated. I go to localhost:3000/enquiries and i see a list of enquiries as well, but when I refresh, the list is empty because, client side state is not set. If I open Redux dev tools, I see enquiry state to be empty all the time.
I think there is something missing during the Hydration of the state. Not sure what it is.Can somebody help me with it?
Here are my references that I followed:
https://romandatsiuk.com/en/blog/post-next-redux-saga/
https://github.com/kirill-konshin/next-redux-wrapper
catalogueSelection in Store Image
I have the data I require in state (catalogueSelection: searchTextResult & categoryCheckboxResult) and need to pass the string 'SearchTextResult' into one component and the Array 'categoryCheckboxResult' into another.
When I try to retrieve the required values I am retrieving the whole store. I have looked at numerous websites and entries here but getting very confused now.
Model:
export class SearchTextResult {
searchTextResult: string;
}
export class CategoryCheckboxResult {
categoryCheckboxResult:Array<CategoryCheckboxResult>;
}
Actions:
import { Action } from '#ngrx/store';
import { SearchTextResult, CategoryCheckboxResult } from 'app/#core/services/products/products.model';
export enum UserCatalogueSelectionTypes {
AddSearchTextResult = '[SearchTextResult] AddResult',
AddCategoryCheckboxResult = '[CategoryCheckboxResult] AddResult',
GetSearchTextResult = '[SearchTextResult] GetResult',
}
export class AddSearchTextResult implements Action {
readonly type = UserCatalogueSelectionTypes.AddSearchTextResult;
constructor(public payload: SearchTextResult){
}
}
export class AddCategoryCheckboxResult implements Action {
readonly type = UserCatalogueSelectionTypes.AddCategoryCheckboxResult;
constructor(public payload: CategoryCheckboxResult){
}
}
export class GetSearchTextResult implements Action {
readonly type = UserCatalogueSelectionTypes.GetSearchTextResult;
}
export type UserCatalogueSelectionUnion =
| AddSearchTextResult
| AddCategoryCheckboxResult
| GetSearchTextResult
Reducers:
import { SearchTextResult, CategoryCheckboxResult} from "app/#core/services/products/products.model";
import { UserCatalogueSelectionTypes, UserCatalogueSelectionUnion} from "../actions/products.actions";
export interface UserCatalogueSelectionState {
searchTextResult: SearchTextResult | null;
categoryCheckboxResult: CategoryCheckboxResult | null;
}
export const initialState: UserCatalogueSelectionState = {
searchTextResult: null,
categoryCheckboxResult: null,
}
export function reducer(state:UserCatalogueSelectionState = initialState, action: UserCatalogueSelectionUnion ): UserCatalogueSelectionState{
switch (action.type) {
case UserCatalogueSelectionTypes.AddSearchTextResult:
return {
...state,
searchTextResult: action.payload,
};
case UserCatalogueSelectionTypes.AddCategoryCheckboxResult:
return {
...state,
categoryCheckboxResult: action.payload,
};
case UserCatalogueSelectionTypes.GetSearchTextResult: {
return state;
}
default: {
return state;
}
}
}
Selectors:
import { createSelector,createFeatureSelector } from "#ngrx/store";
import {UserCatalogueSelectionState} from '../../store/reducer/products.reducer';
export const fetchSearchTextResults = createFeatureSelector<UserCatalogueSelectionState>("searchTextResult");
export const fetchSearchTextResult = createSelector (
fetchSearchTextResults,
(state:UserCatalogueSelectionState) => state.searchTextResult.searchTextResult
);
export const fetchCatalogueCheckBoxResults = createFeatureSelector<UserCatalogueSelectionState>("catalogueCheckboxResult");
export const fetchCatalogueCheckBoxResult = createSelector (
fetchCatalogueCheckBoxResults,
(state: UserCatalogueSelectionState) => state.categoryCheckboxResult.categoryCheckboxResult
);
My Component 1
Observable:
public searchTextResult: Observable<String>;
Contructor: (part of)
private store: Store<fromCatalogueSelection.UserCatalogueSelectionState>
Code Snippet: (asking for the data)
this.searchTextResult = this.store.select('SearchTextResult');
console.log('TESTING SEARCH TEXT: ', this.searchTextResult);
Console:
TESTING SEARCH TEXT: Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: >ReducerManager, source: Store, operator: DistinctUntilChangedOperator}
My Component 2
Observable
searchTextResult$: Observable<CatalogueSelectionActions.GetSearchTextResult>;
Code Snippet: (asking for the data)
this.searchTextResult$ = this.store.select('GetSearchTextResult');
console.log('TESTING SEARCH TEXT: ', this.searchTextResult$);
Console:
TESTING SEARCH TEXT: Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: > ReducerManager, source: Store, operator: DistinctUntilChangedOperator}
I've given up on the Selectors for the moment. Any help much appreciated as I'm going a round in circles.
You are almost there, the value from the console log is the observable object, everytime you select something from the store, you will get the value wrapped within an observable. You just need to subscribe to it:
this.searchTextResult$ = this.store.select('GetSearchTextResult');
this.searchTextResult$.subscribe((yourData) => console.log(yourData));
Also, since you are working with selectors, use them, you don't have to write the state/selector name:
selector
...
export const fetchCatalogueCheckBoxResult = createSelector (
fetchCatalogueCheckBoxResults,
(state: UserCatalogueSelectionState) =>
state.categoryCheckboxResult.categoryCheckboxResult
);
component
import * as YourSelectors from './store/something/selectors/yourthing.selectors'
...
...
this.searchTextResult$ = this.store
.select(YourSelectors.fetchCatalogueCheckBoxResult)
.subscribe(console.log);
Additionally, try to subscribe using the async pipe delegating that to your template html so you don't have to deal with the subscription in the code, for example:
component
...
export class Component {
searchTextResult$!: Observable<any> // your data type here
...
...
this.searchTextResult$ = this.store
.select(YourSelectors.fetchCatalogueCheckBoxResult)
}
html
<ng-container *ngIf="(searchTextResult$ | async) as result">
<p>Your result value: {{ result }}</p>
</ng-container>
I am currently trying to build a simple example of redux using redux/toolkit. I am not sure what I am doing wrong.
This is my store.
import { configureStore } from "#reduxjs/toolkit";
import reducer from "./workouts";
export default function () {
return configureStore({ reducer });
}
Here is my workouts.ts file
import { createAction } from '#reduxjs/toolkit'
export interface IWorkout {
id: number
restTime: number
workoutTime: number
exercises: number[]
numReps: number
}
export interface IState {
workouts: IWorkout[]
}
export interface IAction {
type: string
payload: IWorkout[] | any
}
export const workoutAdded = createAction('workoutAdded')
export const workoutDeleted = createAction('workoutDeleted')
const defaultState: IState = {
workouts: [],
}
let lastId = 0
const reducer = (state: IState = defaultState, action: IAction): IState => {
switch (action.type) {
case workoutAdded.type:
return {
...state,
workouts: [
...state.workouts,
{
id: ++lastId,
restTime: action.payload.restTime,
workoutTime: action.payload.workoutTime,
exercises: action.payload.exercises,
numReps: action.payload.numReps,
},
],
}
case workoutDeleted.type:
return {
...state,
workouts: state.workouts.filter((workout) => workout.id !== action.payload.id),
}
default:
return state
}
}
export default reducer
And here is my index.ts file
import { render } from "react-dom";
import configureStore from "./store/store";
import { workoutAdded } from "./store/workouts";
import App from "./App";
const store = configureStore();
const newWorkout = {
restTime: 10,
workoutTime: 30,
exercises: [1, 2, 3],
NumReps: 6
};
store.dispatch(workoutAdded(newWorkout));
const rootElement = document.getElementById("root");
render(<App />, rootElement);
My error appears in index.ts file in this line:
store.dispatch(workoutAdded(newWorkout));
Not sure what I am missing. I reproduced the error in this sandbox
This is the error that I am getting in the console:
workoutAdded has 0 arguments, if you want to add arguments, you can implement Action
export class workoutAdded implements Action {
readonly type = "workoutAdded"
constructor(public payload: Workout){}
}
This fixed the issue. createAction can receive as a second argument a callback function that returns an object with the payload.
export const workoutAdded = createAction("workoutAdded", (workout) =>{
return { payload: workout };
});
I am working with FirestoreDocument and I am trying to retrieving document data.I am getting the post undefined.Below is my code for service and Component
PostService.ts
import { Injectable } from '#angular/core';
import { AngularFirestore,AngularFirestoreCollection,AngularFirestoreDocument} from 'angularfire2/firestore'
import {Post} from './post';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
#Injectable()
export class PostService {
postsCollection: AngularFirestoreCollection<Post>
postDoc: AngularFirestoreDocument<Post>
constructor(private afs:AngularFirestore) {
this.postsCollection = this.afs.collection('posts',ref => ref.orderBy('published','desc'));
}
getPosts(){
return this.postsCollection.snapshotChanges().map(actions=>{
return actions.map(a=>{
const data=a.payload.doc.data() as Post
const id=a.payload.doc.id
return {id, ...data}
})
})
}
getPostData(id: string){
this.postDoc=this.afs.doc<Post>(`posts/${id}`)
return this.postDoc.valueChanges()
}
}
PostDetailComponent.ts
import { PostService } from './../post.service';
import { Component, OnInit } from '#angular/core';
import {ActivatedRoute} from '#angular/router';
import {Post} from '../post';
#Component({
selector: 'app-post-detail',
templateUrl: './post-detail.component.html',
styleUrls: ['./post-detail.component.css']
})
export class PostDetailComponent implements OnInit {
post: Post
constructor(
private route:ActivatedRoute,
private postService:PostService
) { }
ngOnInit() {
this.getPost();
console.log(this);
}
getPost(){
const id= this.route.snapshot.paramMap.get('id')
return this.postService.getPostData(id).subscribe(data=>this.post=data)
}
}
PostDetailComponent from console
PostDetailComponent {route: ActivatedRoute, postService: PostService}
post:undefined
postService:PostService {afs: AngularFirestore, postsCollection: AngularFirestoreCollection, postDoc: AngularFirestoreDocument}
route:ActivatedRoute {url: BehaviorSubject, params: BehaviorSubject, queryParams: BehaviorSubject, fragment: BehaviorSubject, data: BehaviorSubject, …}
__proto__:Object
My post from PostDetailComponent is undefined.
The rest of your code looks right, I think it's just that your console.log(this) is in the wrong spot.
ngOnInit() {
this.getPost(); <----- your getPost() function is asynchronous
console.log(this); <----- meaning this console.log runs before you get data from Firebase
so when this runs, posts is still undefined.
If you would console.log(this) *AFTER* you get data
from Firebase, then you should see the values OK.
}
getPost(){
const id= this.route.snapshot.paramMap.get('id')
return this.postService.getPostData(id).subscribe(data=>this.post=data)
^^^^^^^^^^^
ASYNC portion is right here
}
To fix it, move your console.log inside your subscription:
ngOnInit() {
this.getPost();
<--- From here
}
getPost(){
const id= this.route.snapshot.paramMap.get('id')
return this.postService.getPostData(id).subscribe(data=> {
this.post=data;
console.log(this); <--- To here
});
}
EDIT - Additional troubleshooting ref comments below.
getPost(){
const id= this.route.snapshot.paramMap.get('id')
console.log('id from route params is: ' + id); <---- log the *id* too
return this.postService.getPostData(id).subscribe(data=> {
this.post=data;
console.log(data); <--- log *data* instead
});
}
Since angular 6 there were changes on rxjs
// replace import 'rxjs/add/operator/map';
with import { map } from 'rxjs/operators';
Then include .pipe() inside PostService.ts file in getPosts() function
like this:
getPosts() {
return this.postCollection.snapshotChanges().pipe(map(actions => {
return actions.map( a => {
const data = a.payload.doc.data() as Post
const id = a.payload.doc.id
return { id, ...data }
})
})
)
}
Home someone helps, cheers !!!
Can anyone see what's wrong with my thunks? The inner code is never called but the outer code is. This is an example thunk:
export function selectCustomer(customerId) {
console.log("This appears in the console fine");
return (dispatch, getState) => {
console.log("This doesn't.. why don't you run..?");
dispatch(loadCustomerToEdit(customerId));
}
};
This is how I'm wiring it up to the component events:
import React, { Component, PropTypes } from 'react';
import CustomerEditForm from './CustomerEditForm.jsx';
import { editCustomer, selectCustomer, selectNewCustomer, saveCustomer } from '../redux/action_creators.jsx';
export const CustomerContainer = React.createClass({
componentWillMount() {
const customerId = FlowRouter.getParam('_id');
if (customerId) {
this.sub = Meteor.subscribe('CustomerCompany.get', customerId, this.setCustomerInState);
} else {
this.props.selectNewCustomer();
}
},
setCustomerInState() {
console.log("setCustomerInState");
this.props.selectCustomer(FlowRouter.getParam('_id'));
},
// Snip
render() {
console.log("CustomerContainer.render()", this.props);
if (this.sub && !this.sub.ready) {
return (<h1>Loading</h1>);
}
return (
<CustomerEditForm
customer = {this.props.customer}
onChange = {this.props.onChange}
onSave = {this.props.onSave}
errors = {this.props.customer.errors}
isValid = {this.props.customer.isValid}
salesRegionOptions={SalesRegions.find().fetch()}
/>
);
}
});
CustomerContainer.propTypes = {
customer: PropTypes.object,
onSave: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
selectCustomer: PropTypes.func.isRequired,
selectNewCustomer: PropTypes.func.isRequired
};
function mapStateToProps(state) {
console.log("CustomerContainer.mapStateToProps", state)
return {
customer: state.userInterface.customerBeingEdited
};
}
function mapDispatchToProps(dispatch) {
//console.log("CustomerContainer.mapDispatchToProps", Actions.customerSave)
return {
onSave: saveCustomer,
onChange: editCustomer,
selectCustomer,
selectNewCustomer
};
}
export default connect(mapStateToProps, mapDispatchToProps
)(CustomerContainer);
And this is my store setup:
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers.jsx';
import thunk from 'redux-thunk';
const middleware = [ thunk ]
const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore)
const store = createStoreWithMiddleware(rootReducer)
export default store;
You'll no doubt recognise a lot of this code as it is adapted from the excellent examples in the redux documentation.
The selectCustomer function is called, so mapDispatchToProps seems to have wired the selectCustomer function to the component, it's just that the method returned by selectCustomer isn't called.
The problem is your mapDispatchToProps function. react-redux does not automatically wrap your action creators if you pass it a function, only if you pass it an object! (or if you bind them manually with bindActionCreators)
Try changing your connect call to this, and it should work:
connect(mapStateToProps, {
onSave: saveCustomer,
onChange: editCustomer,
selectCustomer,
selectNewCustomer
})(YourComponent);