Search code examples
react-nativeecmascript-6reduxnormalizr

Filtering normalized data structure


Forgive me, I'm new to normalizr+redux. I've managed to normalize my data and create a reducer and end up with :

state = {
    installations:{
        "1":{...},
        "2":{...}
    }
}

I would then like to filter this data for use in a UI component into two separate categories (in this case where the installation.operator is equal to the current user). I've managed an implementation that works however it seems exhaustive:

const mapStateToProps = (state, ownProps) => {
    console.log("mapStateToProps", state.installations);
    let assignedInstallations = Object.keys(state.installations)
        .filter(i => {
            return state.installations[i].operator == state.login;
        })
        .map(i => {
            return state.installations[i];
        });
    let unassignedInstallations = Object.keys(state.installations)
        .filter(i => {
            return state.installations[i].operator != state.login;
        })
        .map(i => {
            return state.installations[i];
        });
    return {
        assignedInstallations,
        unassignedInstallations,
        loginUserId: state.login
    };
};

I'm also new to ES6 and am not across all the new syntax shortcuts etc so I suspect there are much better ways to do this.

Is there a more succinct approach with a similar outcome?


Solution

  • you can do this with only one reduce():

    const mapStateToProps = (state, ownProps) => {
        console.log("mapStateToProps", state.installations);
        let {assignedInstallations, 
             unassignedInstallations } = Object.keys(state.installations)
              .reduce(function(acc, cur, i){
                 if(state.installations[i].operator == state.login){
                   acc.assignedInstallations.push(state.installations[i]);
                 }else{
                   acc.unassignedInstallations .push(state.installations[i]);
                 }
                 return acc
               }, {assignedInstallations: [], unassignedInstallations: [] })
    
        return {
            assignedInstallations,
            unassignedInstallations,
            loginUserId: state.login
        };
    };