0

This is a general JavaScript question, although it just is used in React / Redux.

The code:

const connectedComponent = connect(
    state => ({
        noodleCount: state.noodleCount,
        drinkCount: state.drinkCount,
        snackCount: state.snackCount
    })
)(TotalPrice);

seems a bit verbose, because it is using noodleCount, state.noodleCount repeatedly, so I refactored the code to:

const connectedComponent = connect(
    state => {
        const { noodleCount, drinkCount, snackCount } = state;
        return { noodleCount, drinkCount, snackCount };
    }
)(TotalPrice);

The line const { noodleCount, drinkCount, snackCount } = state; made it much more concise, but the next line, I again have to repeat those names, and not only that, have to re-compose the object. Is there a way to make it better, such as being able just to do a return newState;?

P.S. I tried in Node REPL:

> const state = { foo: 1, bar: 2, wah: 3}
undefined

> const newState = {foo, bar} = state;
undefined

> newState
{ foo: 1, bar: 2, wah: 3 }

so unfortunately, newState did not just pick foo and bar but got wah too. I also tried

const connectedComponent = connect(
    state => {
        const newState = { noodleCount, drinkCount, snackCount } = state;
        return newState;
    }
)(TotalPrice);

which is similar to the code in Node REPL above, but it gave

'noodleCount' is not defined  no-undef
Jeremy L
  • 3,770
  • 6
  • 41
  • 62
  • Not really, unfortunately – CertainPerformance Feb 25 '20 at 07:34
  • so the answer is to use lodash's `pick` function? – Jeremy L Feb 25 '20 at 07:36
  • 1
    @CertainPerformance sometimes I hope the question can sit there for a day or two, before it is closed within 5 minutes, so that some people may actually have a solution. If it is closed, then nobody will ever be able to see and provide a possible (or maybe much less likely) – Jeremy L Feb 25 '20 at 07:38
  • 3
    If anyone wants to post a solution, they're free to do so at the canonical question and answer asking about the exact same thing (which is better than having solutions more spread out over duplicated questions - no offense) – CertainPerformance Feb 25 '20 at 07:43
  • Your question was not simply closed. It is linked to another related question with all the answers. I count at least 10 different implementations of at least 3 different techniques there – slebetman Feb 25 '20 at 07:50
  • @JeremyL Can you not just use the spread syntax to spread the state into the new object? `(state) => ({ ...state })` – Ben Aston Feb 25 '20 at 10:29
  • @CertainPerformance is it that when it is closed, it disappear from the list of question of the main page (of user's watch list)? – Jeremy L Feb 25 '20 at 12:02
  • 1
    @Ben but there can be tons of other info in `state`, and you don't want to include those (in Redux, it is like, you don't want to pass those extra info into components... you only want to pass the minimal, for speed, data integrity, and minimum re-render of components) – Jeremy L Feb 25 '20 at 12:02
  • Per the other answer there doesn't appear to be an existing language syntax to really help you. But writing your own pick function is trivial. `const pick = (x, ...toPick) => toPick.reduce((y, f) => ((y[f] = x[f]), y), {})` – Ben Aston Feb 25 '20 at 12:55
  • 1
    @Ben thank you. Besides finding out how to get a library of functions into the code (or maybe just better to use lodash), right now I hope to keep it as simple as possible -- the React / Redux is complicated enough... don't want to add a layer of abstraction to it (want to see the real and simple thing first for the moment) – Jeremy L Feb 25 '20 at 13:10
  • @Ben please see the PS in the question if interested – Jeremy L Feb 25 '20 at 13:24
  • `const newState = {foo, bar} = state` is not doing what you think it is. `state` is destructured into *two new implicitly-defined variables* `foo` and `bar`. Note: NOT an object. You get `'noodleCount' is not defined no-undef` because your application code is running in strict mode (unlike the Node REPL), which prevents implicit variable declarations. – Ben Aston Feb 25 '20 at 13:34

0 Answers0