Sometimes my Redux selectors are quite complicated. I need some means for debugging each step in the chain.
Here is a simplified selector as an example:
export const selectCompletedFilesForSaveToServer = state => {
return state
.getIn(['file', 'saveToServerQueue'])
.filterNot(item => item.get('isPosting'))
.valueSeq();
};
And this is what I want to do:
export const selectCompletedFilesForSaveToServer = state => {
return state
.getIn(['file', 'saveToServerQueue'])
.intercept(item => console.log(item.toJS())
.filterNot(item => item.get('isPosting'))
.intercept(item => console.log(item.toJS())
.valueSeq();
};
I.e. the intercept function should take whatever collection is thrown at it (Map, List, etc), iterate over the collection and then return the original collection for further chaining.
I tried to use .forEach(), but I didn't understand how it works.
My current solution is to manually break up the chain into separate intermediate variables for inspection, but this is not a nice solution.
Well.. while writing my question I kind of got some perspective and solved it.
The .filter() function essentially is a peek function. Just remember to return true..
export const selectCompletedFilesForSaveToServer = state => {
return state
.getIn(['file', 'saveToServerQueue'])
.filter(item => {
console.log(item.toJS());
return true;
});
.filterNot(item => item.get('isPosting'))
.filter(item => {
console.log(item.toJS());
return true;
});
.valueSeq();
};
edit:
I found an even better function: .update(). It's chainable and takes a custom function as an argument. The custom function gets the collection as argument and should return the collection as well (in my use case).
https://facebook.github.io/immutable-js/docs/#/Collection/update
New example:
export const selectCompletedFilesForSaveToServer = state => {
const peek = function(collection) {
console.log(collection.toJS());
return collection;
};
return state
.getIn(['file', 'saveToServerQueue'])
.update(peek);
.filterNot(item => item.get('isPosting'))
.update(peek);
.valueSeq();
};
Related
The two of the following result in different things although they look like the same thing.
1
const addBlogPost = dispatch => {
return () => {
dispatch({type: 'add_blogpost'});
}
};
2
const addBlogPost = dispatch => dispatch({type: 'add_blogpost'});
Could anyone point out how are they different?
You can use this site to compile es6 arrow functions to vanilla JS to easily see the difference.
The first one compiles to this
var addBlogPost = function addBlogPost(dispatch) {
return function () {
dispatch({
type: 'add_blogpost'
});
};
};
While the second compiles to this
var addBlogPost = function addBlogPost(dispatch) {
return dispatch({
type: 'add_blogpost'
});
};
The first returns a function that has a dispatch while the second one returns a dispatch directly.
The result will always be the same as both functions are retuning the same thing.
The only difference is:
In the first function, you're returning a function which returns an object that returns dispatch function.
In the second function, you're returning your dispatch function directly.
I have tried researching this but was rather swamped, was wondering if someone has a solid answer regarding use of named functions in redux action creators vs named functions - is there any performance difference? Or any other factors that affect this?
eg:
function getUserIdentity() {
return (dispatch) => {
dispatch({
type: types.GET_USER_IDENTITY,
});
}
}
vs
const getUserIdentity = () => (dispatch) => { dispatch({type: types.GET_USER_IDENTITY}) };
Thanks!
Any performance difference doesn't matter, the two functions aren't even doing the same. The arrow function "equivalent" of your function declaration would be
const getUserIdentity = () => (dispatch) => { dispatch({type: types.GET_USER_IDENTITY}) };
not
const getUserIdentity = (dispatch) => dispatch({ type: types.GET_USER_IDENTITY });
as in your question.
Regarding the updated question, no there is no performance difference between calling the different function types. However, there is still a behavioural difference, see Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? and also var functionName = function() {} vs function functionName() {} - a variable initialisation happens at a different time than that of a "hoisted" function declaration, which might make a difference depending on how/where the function is used.
I have the following function:
class RestService {
public async get<T>(func: string): Promise<T> {
var toRet = {};
await fetch(EndPoint + func)
.then(response => response.json() as Promise<T>)
.then(data => {
toRet = data;
})
.catch(e => {
});
return toRet as T;
}
}
Everything works fine but the response I get in 'data' is ALWAYS a generic object.
For example I might have a model like so:
class Model
{
string name;
}
and call the function like so:
get<Model>("getmodel")
The response is ALWAYS a generic object that looks like:
{name:"some name"}
From my understanding generics are supported in Typescript and Promise takes in variable types, my only thought is that I can't pass a generic into a generic?
Maybe a better way to write it would be this way.
class RestService {
public async get<T>(func: string): Promise<T | void> {
return await fetch('' + func)
.then(response => response.json() as Promise<T>)
.then(data => {
return data;
})
.catch(e => {
});
}
}
You can see it in the playground too at this link.
This way you don't have to overwrite any types and the compiler can figure out everything on it's own.
The return type is now Promise<T | void> because the catch function doesn't return anything. You could have something else or nothing depending what you do in case of an error.
Typescript will not transform the data object to match the T type you give in automatically.
If for example you call the method with get<AnotherModel>('modelEndpoint') but the endpoint returns Model. While the type at build time will say you should expect an object of type AnotherModel at runtime the object will in fact be of type Model.
This isn't clear from the question but maybe your issue is with the fact that the data is of type T instead of the Promise<T> that you return in the previous then callback.
If that is the case, that's because any Promise sent as a callback to the then function is resolved first before the outer then is called.
That means your code is equivalent to.
.then(response => response.json().then((data) => data as T))
.then(data => {
return data;
})
It's just that the Promise api will just take care of that for you.
If you want to learn more about the pitfalls of Promises in Javascript this post is quite good.
I developped an Angular2 service to retrieve a list a categories from a backend server and count how many 'links' exist per category.
Once I have the number of links for each category, I add a property to the Json object to 'store' the value.
Here is the code:
nbLinks = '';
...
getCategories() {
return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {
this.categoriesList = data;
for (var i = 0; i < this.categoriesList.length; i++) {
var obj = this.categoriesList[i].id;
this.category.countLinks(obj).subscribe((linksCount) => {
this.nbLinks = linksCount;
}, err => {
console.log(err);
});
}
return data;
},
err => {
console.log(err);
}
);
I am getting the categories in a json object with the correct 'where' clause.
I am looping on the Json to 'count' the number of link in this category.
My problem is that outside the for loop (getting out) the variable i is bigger than my Json length so the app is crashing.
My second problem is that I do not have the visiblity of this.nbLinks outside the for ... loop.
Thanks an Regards
I'm not sure I understand your code, but two things stand out:
1) It looks like you're mixing synchronous and asynchronous code. It cannot work.
Sync code: the for loop. Async code: the observable.
Instead, could you refactor your code to ONLY work with observables and chain all the operations? You can wrap any piece of data in an observable with Observable.from() or Observable.of().
For instance:
getCategories() {
const categories = this.category.find({where: {clientId: this.userApi.getCurrentId()}});
return Observable.from(categories)
.map(category => countLinksInCategory(category));
}
If countLinksInCategory() is an async operation, then have that function return an Observable, and use .mergeMap() instead of .map() in the code above.
2) Try avoiding setting an outside variable from within your observable
// This part is not ideal
Obs.subscribe(linksCount => {
this.nbLinks = linksCount;
});
I would suggest renaming getCategories() to getNumLinks() to reflect the role of the function. The only job of the Observable inside this function is to produce a value. Then, the consumer of the Observable can use that value (i.e. assign it, display it...).
In terms of code:
getNumLinks(): Observable<number> {
// Here, count the number of links - See example code above.
// Eventually, return an observable wrapping the final value.
}
Then, elsewhere in your code:
// This is where you assign the value returned by the Observable.
// Note that we are OUTSIDE the Observable now.
getNumLinks().subscribe(numLinks => this.nbLinks = numLinks);
Take the following TypeScript/Angular 2 code sample:
query(): Rx.Observable<any> {
return Observable.create((o) => {
var refinedPosts = new Array<RefinedPost>();
var observable = this.server.get('http://localhost/rawData.json').toRx().concatMap(
result =>
result.json().posts
)
.map((post: any) => {
// Assume I want to convert the raw JSON data into a nice class object with
// methods, etc.
var refinedPost = new RefinedPost();
refinedPost.Message = post.Message.toLowerCase();
refinedPosts.push(refinedPost);
})
.subscribeOnCompleted(() => {
o.onNext(refinedPosts);
})
});
}
Written out, the database is returning JSON. I want to iterate over the raw JSON and create a custom object, eventually returning to subscribers an Array<RefinedPost>.
The code works and the final subscribers get what they need, but I can't help but feel like I didn't do it the "Reactive Way". I cheated and used an external accumulator to gather up the elements in the Array, which seems to defeat the purpose of using streams.
So, the question is, is there a better, more concise, reactive way to write this code?
Answering my own question.
query(): Rx.Observable<any> {
return this.server.get('http://localhost/rawData.json').toRx().concatMap(
result =>
result.json().posts
)
.map((post: any) => {
var refinedPost = new RefinedPost();
refinedPost.Message = post.Message.toLowerCase();
return refinedPost;
}).toArray();
}
This removes the internal accumulator and the wrapped Observable. toArray() took the sequence of items and brought them together into an array.