Hack The Code

@isaadabbasi

By. Saad Abbasi

{
students: [...]
}

{
marketing: [...],

engineering: [...],

design: [...],
}

component

action

normalization

data

store

❌

API Server

Normalization

Selectors

{
students: [...]
}

component

action

data

store

API Server

{
students: [...]
}

data

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

Expensive

isn't it???

Reselect

to the rescue

const students = store.students;


export const engineerSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'engineering');
)

export const designerSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'art and design');
)

export const marketingSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'marketing');
)

Selectors can compute derived data, allowing Redux to store the minimal possible state.
Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
Selectors are composable. They can be used as input to other selectors.

const students = store.students;


export const getStudentById = (id = '') => {

  return createSelector(
    students,
    (students = []) => students.find((std) => std.id === id);
  );
};

memoization dead 💀

Problem

possibly mem-leak ☢️


class ABC extends React.Component {
  componentWillReceiveProps(prev, next){
  	if (prev.students !== next.students) {
      const studentId = router.params.id;
      this.setState({
        student: this.props.students.find(std => std.id === id);
      });
    }
  }
  
  render(){
	const data = this.state.student;
    return (
	 <StudentBio data={data}/>
    );
  }
}

export default connect(
	(state) => ({students: state.students})
)(ABC);

O(n)

every single time 🙄

Entity Pattern

to the rescue

{
students: [...]
}

component

not objects

store

{
students: [
{101: {...}},

{102: {...}},

{103: {...}},

]}

entities

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

API Server

const students = store.students;


export const engineerSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'engineering');
)

export const designerSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'art and design');
)

export const marketingSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'marketing');
)

Refactoring

as per entities

Cool! No Side Effects


class ABC extends React.Component {
  componentWillReceiveProps(prev, next){
  	if (prev.students !== next.students) {
      const studentId = router.params.id;
      this.setState({
        student: this.props.students[studentId];
      });
    }
  }
  
  render(){
	const data = this.state.student;
    return (
	 <StudentBio data={data}/>
    );
  }
}

export default connect(
	(state) => ({students: state.students})
)(ABC);

O(1)

holy cow 😃😃😃

Mission Accomplished

🎇

any questions?