Selectors and normalizing state shape

SELECTORS and
NORMALIZING STATE SHAPE
Improving performance in Redux
Muntasir Chowdhury

const mapStateToProps = state => {
return {
attributeOne: state.attributeOne,
attributeTwo: state.attributeTwo,
};
}

mapStateToProps()
1. Runs when any part of the Redux store updates
2. Shallow compare of computed values (previous and new)
Shallow Compare
Render Do nothing
Not equal Equal

What is a selector?
Code that derives data

mapStateToProps = state => ( { articles: state.articles });
A simple selector

mapStateToProps = state => ( {
firstThreeArticles: state.articles.splice(0, 3)
});
Transform Data

function getFirstThreeArticles(state) {
return state.articles.slice(0, 3);
}
firstThreeArticles: getFirstThreeArticles(state)
});
Extract to function

function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
articles: filterArticles(state.articles, state.filter)
});

switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
“READ”:
}
}
articles: filterArticles(state.articles, state.filter),
usersOnline: state.usersOnline
});

switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
“READ”:
}
}
});
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 1629
}

switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
“READ”:
}
}
});
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 1629
}
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 2004
}

createSelector( [selector1, selector2...], transformFunction)

import { createSelector } from 'reselect'
const getFilter = (state) => state.filter;
const getArticles = (state) => state.articles;
export const filterArticles = createSelector(
[ getFilter, getArticles ],
(articles, filter) => {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
“READ”:
}
}
)

Connect Selector to Redux Store

import { connect } from 'react-redux';
import Articles from '../components/TodoList';
import { filterArticles } from '../selectors';

const mapStateToProps = state => {
return {
articles: filterArticles(state),
}
}

const ArticleList = connect(mapStateToProps, null)(Articles)

export default ArticleList

NORMALIZING STATE SHAPE
Nested State vs
Normalized State

const articles = [
{
id : "artcle1",
user : {userId: “ui1”, username : "user1", name : "User 1"},
body : "......",
comments : [
{
id : "comment1",
user : {userId: "ui2", username : "user2", name : "User 2"},
comment : ".....",
},
{
id : "comment2",
comment : ".....",
}
]
},
Nested State

{
id : "article2",
user : {username : "user2", name : "User 2"},
body : "......",
comments : [
{
id : "comment3",
comment : ".....",
},
{
id : "comment4",
comment : ".....",
}
]
}
……
];
Nested State

//articleListContainer.js
mapStateToProps = (state) => ({
articles: state.articles
});
// articleList.js
const ArticleList = (articles) => ({
articles.map(article => <Article article=article />)
});
Selecting Nested State

// article.js
const Article = (article) => ({
<div>article.content</div>
{ article.comments.forEach(comments) => <Comment comment=comment /> }
});
// comment.js
const Comment = (comment) => ({
<div>comment.content</div>
<User user=comment.user />
});

// user.js
const User = (user) => ({
<div>user.name</div>
});

ArticleList
Article
Comment
User
User
Comment …..
Article …..

ArticleList
Article
Comment
User
User
Comment …..
Article …..
Redux Storeconnect()

//action.js
function changeUserName(userId, name) {
return {
type: CHANGE_USER_NAME,
payload: {
name
}
};
}
Updating Nested State

//reducer.js
const posts = (state, action) => {
switch(action.type) {
case "CHANGE_USER_NAME":
// find every post
// where the user as the author of the post
// or as the author of one of its comments
}
}
Updating Nested State

1. Difficult to update
a. Duplicate data
b. Complex reducer logic due to nesting
2. Higher chance of redundant re-renders
Nested State

Normalized State
Divide & Flatten

//articles_reducer.js
articles : {
byId : {
"article1" : {
id : "article1",
user : "user1",
body : "......",
comments : ["comment1", "comment2"]
},
"article2" : {
id : "article2",
user : "user2",
body : "......",
comments : ["comment3", "comment4", "comment5"]
}
},
allIds : ["article1", "article2"]
}
Normalized State

//comments_reducer.js
comments : {
byId : {
"comment1" : {
id : "comment1",
user : "user2",
comment : ".....",
},
"comment2" : {
id : "comment2",
user : "user3",
comment : ".....",
},
"comment3" : {
id : "comment3",
user : "user3",
comment : ".....",
}
},
allIds : ["comment1", "comment2", "comment3"]
}
Normalized State

//users_reducer.js
users : {
byId : {
"user1" : {
username : "user1",
name : "User 1",
}
"user2" : {
username : "user2",
name : "User 2",
}
"user3" : {
username : "user3",
name : "User 3",
}
},
allIds : ["user1", "user2", "user3"]
}
Normalized State

//articleListContainer.js
mapStateToProps = (state) => ({
articles: state.articles.allIds
});
// articleList.js
const ArticleList = (articleIds) => ({
articles.map(articleId => <Article articleId=articleId />)
});
Selecting Normalized State

// article.js
const Article = (article) => ({
<div>article.content</div>
{ article.comments.map(commentIds => <CommentContainer commentId=commentId /> }
});

//commentContainer.js
mapStateToProps = (state, ownProps) => ({
comment: state.comments.byId[ownProps.commentId]
});
// comment.js
const Comment = (comment) => ({
<div>comment.content</div>
<UserContainer user=comment.user />
});

//userContainer.js
mapStateToProps = (state, ownProps) => ({
user: state.user.byId[ownProps.userId]
});
// user.js
const User = (user) => ({
<div>user.name</div>
});

ArticleList
Article
Comment
User
User
Comment …..
Article …..
Redux Storeconnect()
connect()
connect()
connect()

//action.js
function changeUserName(userId, name) {
return {
type: CHANGE_USER_NAME,
payload: {
name
}
};
}
Updating Normalized
State

//userReducer.js
const usersById = (state, action) => {
switch(action.type) {
case "CHANGE_USER_NAME":
userId = action.payload.id;
changedUser = {
...state[userId],
name: action.payload.name
};
return {
...state,
[userId] : changedUser
};
default:
return state;
}
}
const usersReducer = combineReducers({
byId: usersById,
allIds: [....]
});
Updating Normalized State

Normalized State
1. Easy to update
a. Single copy of data
b. Reducer logic more manageable (less nesting)
2. More connected & independent components -> less re-renders

Other Topics
● Multiple instances of memoized selectors
● Relationships and Tables (treating Redux like a relational DB)
● Normalizing nested data from API using Normalizr

Selectors and normalizing state shape

More Related Content

What's hot (20)

Similar to Selectors and normalizing state shape (20)

Recently uploaded (20)

Selectors and normalizing state shape