https://github.com/codemeasandwich/red-ux
Better ux for redux
https://github.com/codemeasandwich/red-ux
optimization performance redux reselect
Last synced: about 1 month ago
JSON representation
Better ux for redux
- Host: GitHub
- URL: https://github.com/codemeasandwich/red-ux
- Owner: codemeasandwich
- Created: 2017-07-04T17:05:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-11T13:16:56.000Z (about 8 years ago)
- Last Synced: 2025-10-30T16:57:27.489Z (7 months ago)
- Topics: optimization, performance, redux, reselect
- Language: JavaScript
- Size: 17.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# red-ux
## performance utilities for progressive web apps.
take your user experience out of the red
[](https://www.npmjs.com/package/red-ux) [](https://codecov.io/gh/codemeasandwich/red-ux) [](https://circleci.com/gh/codemeasandwich/red-ux)
---
* React:
* [shouldUpdate](#react-reduce-unneeded-re-rendering-with-shouldupdate) - reduce unneeded re-rendering
* Redux:
* [genSelectState](#redux-result-caching-with-genselectstate) - result caching
---
## React: Reduce unneeded re-rendering with `shouldUpdate`
```JS
import React, {Component} from 'react';
import { shouldUpdate } from 'red-ux'
export class List extends Component {
shouldComponentUpdate(nextProps, nextState){
return shouldUpdate(nextProps, nextState);
}
render() {
return (
- {
- {name} )
this.props.data.map(({name,id}) =>
}
}
}
```
---
## Redux: Result caching with `genSelectState`
`genSelectState` uses [Reselect](https://github.com/reactjs/reselect) under the hood.
This function will let you wrap computationally expensive logic.
Example; using React & Redux.
* Without `genSelectState`
```JS
import React, {Component} from 'react';
import { connect } from 'react-redux';
export class List extends Component {
render() {
const posts = this.props.posts.map( post => ({ id: post.uid, name:post.userName }) )
return (
- {this.props.user.name} List {
- {post.name} )
posts.map(post =>
}
}
}
const map_state_to_props = (state)=>({
user : state.user,
posts : state.posts
}}
export default connect(map_state_to_props)(List);
```
* With `genSelectState`
```JS
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { genSelectState } from 'red-ux'
export class List extends Component {
render() {
return (
- {this.props.user.name} List {
- {post.name} )
this.props.posts.map(post =>
}
}
}
const map_state_to_props = (state)=>({
user : state.user,
posts : state.posts
}}
const works = {
posts : posts => posts.map( post => ({ id: post.uid, name:post.userName }))
}
export default connect(genSelectState( map_state_to_props, works ))(List);
```
Now the transformation will only happen once on each if the reference passed in was the same.
This means that the posts transformation will happen on the first call and will return the same calculated value is the posts have not changed.
### An **alternative api** is available that more closely follows *reselect*
```JS
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { genSelectState } from 'red-ux'
export class List extends Component {
render() {
return (
- {this.props.user.name} List {
- {post.name} )
this.props.posts.map(post =>
}
}
}
const selecters = {
user : state => state.user
posts : state => state.posts
}
const works = {
posts : posts => posts.map( post => ({ id: post.uid, name:post.userName }))
}
export default connect(genSelectState( selecter, works ))(List);
```
You pass an `Object` as the first argument to `genSelectState` that maps the to select functions
- If you have multiple pieces of state. **Pass an Array**
```JS
const map_state_to_props = (state)=>({
user : state.user,
posts : [state.posts.a,
state.posts.b]
}}
const works = {
posts : (a,b) => posts.map( post => ({ id: post.uid, name:post.userName }))
}
```
and
```JS
const selecters = {
user : state => state.user
posts : [state => state.posts.a,
state => state.posts.b]
}
const works = {
posts : (a,b) => posts.map( post => ({ id: post.uid, name:post.userName }))
}
```
**📌 Note:** As an optimization. The works object will has it's properties wrapped. So feel free to call works properties after the fact, knowing your getting optimized results.
```JS
const works = {
foo : (a) => stuff(a),
bar : (a,b) => works.foo(a) + b,
cat : (a,b) => works.bar(a,b) + 1000,
}
```
`works.bar` will only be executed once, even though its referenced twice.