feat: add value getter to the store selctor for easy access to the selected slice of the state#329
Conversation
📝 WalkthroughWalkthroughThis PR adds a public ChangesTanStackStoreSelector value getter
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/framework/lit/quick-start.md`:
- Line 8: Update the opening line to be a complete sentence by expanding the
fragment to something like "The `TanStackStoreSelector` can be used in two
ways." Locate the line referencing `TanStackStoreSelector` in the quick-start
content and replace the fragment with the full sentence form so it reads
grammatically complete and clear.
In `@packages/lit-store/src/tan-stack-store-selector.ts`:
- Line 31: Update the JSDoc examples for TanStackStoreSelector to use correct,
copy-pastable symbols and remove stray formatting: replace the invalid reference
`TanStackStoreAtom` with the intended class/name (TanStackStoreSelector) and
remove backticks around instance property examples like `#name` so the snippet
shows valid JS/TS usage (e.g., const name = new TanStackStoreSelector(...); or
selector.name) in both example blocks that reference the selector; ensure the
example code compiles and matches the actual API surface of
TanStackStoreSelector.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 07a835dd-8b5b-4fd3-b7fd-c01ba7caebc6
📒 Files selected for processing (3)
docs/framework/lit/quick-start.mdpackages/lit-store/src/tan-stack-store-selector.tspackages/lit-store/tests/selector.test.ts
…lected slice of the state
fredericbahr
force-pushed
the
feat-add-value-getter-to-store-selctor
branch
from
e548931 to
1c84546
Compare
|
@KevinVandy or @crutchcorn could you perhaps have a look and approve this PR If you find Some spare time? It is needed to continue to work on a PR in Tanstack/table. Kind regards. |
|
I don't understand why this is needed or how it pragmatically helps Table. Can you expand on that? |
|
TL;DR
Developer ExperienceI believe this change improves the developer experience. Consider the following example: export const store = createStore({
dogs: 0,
cats: 0,
})
export class AnimalDisplay extends LitElement {
// Subscribes only to `state[animal]`
counter = new TanStackStoreSelector(
this,
() => store,
(state) => state["dogs"],
)
render() {
return html`
<div>
<p>
Reading directly from store.state:
${store.state["dogs"]}
</p>
</div>
`
}
}If the requirements later change and the component should display the bird counter instead, there are currently three separate places that need to be updated: export const store = createStore({
birds: 0, // update store structure
cats: 0,
})
export class AnimalDisplay extends LitElement {
counter = new TanStackStoreSelector(
this,
() => store,
(state) => state["birds"], // update selector
)
render() {
return html`
<div>
<p>
Reading directly from store.state:
${store.state["birds"]} // update access to the selected information again
</p>
</div>
`
}
}This can technically be mitigated by introducing a private accessor or helper method, but I think the selector itself is the more appropriate abstraction for both selecting and exposing a specific piece of state. Aligning with other framework adaptersLooking at the other framework adapters, the abstraction already behaves this way by returning the selected value directly and updating it reactively when the store changes:
From that perspective, exposing the selected value directly in the Lit abstraction would make the API more consistent across the ecosystem as currently the lit adapter is the only adapter that requires an additional access to the store. Usage in Tanstack TableThis also seems beneficial for integrating this adapter into TanStack Table. The subscriber/controller can internally handle state selection and expose only the derived value. For example, in this change: Using a getter for the selected value simplifies the implementation because the controller becomes fully responsible for evaluating and updating the selection. Without that abstraction, we internally would need to manually retrieve the source state and reapply the selector function, even though that logic has already been handled by the controller. Please let me know if I’m missing something or if you see it differently. Happy to continue the discussion. |
2 participants
🎯 Changes
Added value-setter in the Lit TanstackStoreSelector for easy access to lifecycle-aware fine-grained reactivity.
This aligns with the react-hook which also returns the value directly:
const count = useSelector(counterStore, (state) => state.count)Additonally this helps using
@tanstack/lit-tableinternally for theSubscribefunction, which im currently trying to reimplement (TanStack/table#6267).Added
TanstackStoreSelctor.valuegetter for direct access to selected state✅ Checklist
pnpm test:pr.🚀 Release Impact
Summary by CodeRabbit
New Features
valuegetter to access the currently selected store value directly.Documentation
Tests
Chores