Skip to content

Instantly share code, notes, and snippets.

@reddyonrails

reddyonrails/mapStateToProps-vs-Selector.js

Forked from fredbegin11/mapStateToProps-vs-Selector.js
Created February 11, 2020 23:25
Show Gist options
  • Save reddyonrails/f057226adfc5dea8e1194c68d9051d2d to your computer and use it in GitHub Desktop.
Save reddyonrails/f057226adfc5dea8e1194c68d9051d2d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @fredbegin11 fredbegin11 revised this gist Oct 17, 2018. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions mapStateToProps-vs-Selector.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Store d'exemple
    // Store Redux
    state = {
    cars: {
    carsById: {
    @@ -9,8 +9,12 @@ state = {
    }
    };

    // Component d'exemple
    class LoadsTrackingPage extends PureComponent {
    // selectors.js
    const carsSelector = state => state.cars.carsById;
    export const getCarsSelector = createSelector(carsSelector, carsById => Object.values(carsById));

    // CarListPage.js
    class CarListPage extends PureComponent {
    ...
    render() {
    return (
    @@ -24,6 +28,6 @@ class LoadsTrackingPage extends PureComponent {

    const mapStateToProps = state => {
    return {
    cars: Object.values(state.cars.carsById) // retourne un nouvel objet à chaque render
    cars: getCarsSelector(state)
    };
    };
  2. @fredbegin11 fredbegin11 revised this gist Oct 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mapStateToProps-vs-Selector.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ state = {
    3: { id: 3, name "Honda" }
    }
    }
    }
    };

    // Component d'exemple
    class LoadsTrackingPage extends PureComponent {
  3. @fredbegin11 fredbegin11 revised this gist Oct 16, 2018. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions mapStateToProps-vs-Selector.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,7 @@ state = {
    1: { id: 1, name "Toyota" },
    2: { id: 2, name "Lexus" },
    3: { id: 3, name "Honda" }
    },
    isFetching: false
    }
    }
    }

  4. @fredbegin11 fredbegin11 revised this gist Oct 16, 2018. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions mapStateToProps-vs-Selector.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Store
    // Store d'exemple
    state = {
    cars: {
    carsById: {
    @@ -10,6 +10,7 @@ state = {
    }
    }

    // Component d'exemple
    class LoadsTrackingPage extends PureComponent {
    ...
    render() {
    @@ -24,6 +25,6 @@ class LoadsTrackingPage extends PureComponent {

    const mapStateToProps = state => {
    return {
    cars: Object.values(state.cars.carsById)
    cars: Object.values(state.cars.carsById) // retourne un nouvel objet à chaque render
    };
    };
  5. @fredbegin11 fredbegin11 created this gist Oct 16, 2018.
    29 changes: 29 additions & 0 deletions mapStateToProps-vs-Selector.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    // Store
    state = {
    cars: {
    carsById: {
    1: { id: 1, name "Toyota" },
    2: { id: 2, name "Lexus" },
    3: { id: 3, name "Honda" }
    },
    isFetching: false
    }
    }

    class LoadsTrackingPage extends PureComponent {
    ...
    render() {
    return (
    <div className="myClass">
    {this.props.cars.map(car => <CarComponent car={car} />)}
    </div>
    );
    };
    ...
    }

    const mapStateToProps = state => {
    return {
    cars: Object.values(state.cars.carsById)
    };
    };