1

guys.

I'm making some store system. I have to access my object value like this.

const store = {
    modules: {
    A: {
        numbers: [1, 2, 3, 4]
    },
    B: {
        chars: ['a', 'b']
    }
  }
}

const doubled = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: [...store.modules.A.numbers, ...store.modules.A.numbers]
      }
    }
  }
}

const few = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: store.modules.A.numbers.slice(0, 2)
      }
    }
  }
}

But, this code is too long and it is not useful. I don't like this way.

I want to make the doubled, few to like this short code. (wrong code)

const doubled = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: [...**this.**numbers, ...**this.**numbers]
      }
    }
  }
}

const few = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: **this.**numbers.slice(0, 2)
      }
    }
  }
}

Is there any way to edit object value by key itself?

hgkim
  • 95
  • 5
  • It looks like you're using Redux (in React, I guess?) - if so, please use the right tags. – Dai Feb 17 '21 at 05:21
  • If you are using Redux or React, then your `doubled` and `few` should be defined as `function(state)`, not as object-literals. – Dai Feb 17 '21 at 05:25
  • 1
    The _real_ solution to your problem is `combineReducers`, btw. – Dai Feb 17 '21 at 05:27
  • @Dai Actually, I'm using Storybook.js with Vue and Vuex. I have to show many stories, each has different dummy data. – hgkim Feb 17 '21 at 05:33
  • Ah, I'm not familiar with Storybook.js, however Vuex is based on Redux, so while my answer won't be a perfect fit for your problem, it should point you in the right direction. – Dai Feb 17 '21 at 05:34

1 Answers1

2

It looks like you're trying to build a Redux Vuex state store, however you aren't representing your state-transition functions correctly - they should be functions, not objects.

Common logic can be moved into other pure-functions and used via combineReducers. But for the purposes of my answer I'll use a more hand-written approach:

You just need to do this:

Step 1: Notice common functionality

const store = {
    // same as above
};

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function double( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: doubleNumbers( store.modules.A.numbers )
            }
        }
    }
}

function few( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: take2Numbers( store.modules.A.numbers )
            }
        }
    }
}

Step 2: Function composition

This can be made syntactically shorter by composing the pure-function for numbers via cloneStateButUpdateNumbers:

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function cloneStateButUpdateNumbers( store, numbersFunc ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: numbersFunc( store.modules.A.numbers )
            }
        }
    }
}

function double( store ) {
    return cloneStateButUpdateNumbers( store, doubleNumbers );
}

function few( store ) {
    return cloneStateButUpdateNumbers( store, take2Numbers );
}

Step 3: Syntactical terseness:

...and by using ECMAScript 6 arrow-function syntax and const:

const doubleNumbers = ( arr ) => [ ...arr, ...arr ];
const take2Numbers  = ( arr ) => arr.slice( 0, 2 );

// See https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object 
const cloneStateButUpdateNumbers = ( store, numbersFunc ) => ( {
    ...store,
    modules: {
        A: {
            numbers: numbersFunc( store.modules.A.numbers )
        }
    }
} );

const double = ( store ) => cloneStateButUpdateNumbers( store, doubleNumbers );
const few    = ( store ) => cloneStateButUpdateNumbers( store, take2Numbers );

Ta-da!

Dai
  • 141,631
  • 28
  • 261
  • 374