GithubHelp home page GithubHelp logo

Comments (5)

bcherny avatar bcherny commented on May 19, 2024 5

@hackerxian I did, and thanks for bringing it up! Both syntaxes are great (in fact we could easily support all 3), but there are a few small downsides, I think:

  1. Having >1 way to do something makes me more uncertain how to do that thing. If I see 3 different syntaxes floating around, which is the right one? Is one a legacy syntax? Are there differences between them?
  2. Using Undux in a really large codebase, a lot of people don't read docs and instead grep for usages. Assuming one form (eg. store.set(k)(v)) is the most popular in that codebase, people will use it anyway. When someone else comes along and uses a different form (eg. store.set(k, v)), it might confuse people in code review (back to (1) again).
  3. Speaking of grepping for usages, if you want to see every place where your key 'userList' gets set today, you just grep for store.set('userList') and you'll get all the usages. If there are 3 forms, you'll have to grep for those too.
  4. The store.set(k)(v) form encourages people to think in terms of partial application, which gives more concise, more readable code (onChange={store.set(k)}).

Admittedly, these are pretty minor downsides. I think the guiding principle is: 1 way to do things, not more.

from undux.

bcherny avatar bcherny commented on May 19, 2024

This is an interesting idea. I went ahead and implemented it as an experiment in this PR.

Three downsides of this sort of setter syntax:

  1. We can't use curried setters, which are a convenient feature that works nicely with React APIs https://github.com/bcherny/undux#partial-application-all-the-way-through
  2. Setting a value now looks really different than React's setState API. The similarity between .set and .setState is intentional, and I think helps people understand what they're doing.
  3. It's hard to understand at a glance that you're updating an Undux store (it just looks like you're setting a property on a prop, which is bad). It's magic, which might be unnecessary.

All of these points may be reasonable compromises for the sake of simplicity. So the API would look like:

withStore('a')(store =>
  <div>a is {store.a}</div>
  <button onClick={() => store.a++}>Add 1 to a</button>
)

from undux.

hackerxian avatar hackerxian commented on May 19, 2024

Do you consider this? Maybe better understand

store.set('number', 1) ;
store.set({number: 1}) ;

from undux.

zhy0216 avatar zhy0216 commented on May 19, 2024

can we automatically generate getter/setter, but not sure if we still can get advantage of compile errors.
store.get('addTodoTitle') => store.getAddTodoTitle
store.set('addTodoTitle') => store.setAddTodoTitle

from undux.

bcherny avatar bcherny commented on May 19, 2024

@zhy0216 There's no way to do that safely, unless we introduce a codegen script.

from undux.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.