Skip to content

Commit c816cb3

Browse files
authored
Improve writing of store setters with range and multiple indices (#1110)
1 parent 201fc72 commit c816cb3

File tree

2 files changed

+45
-14
lines changed

2 files changed

+45
-14
lines changed

src/routes/concepts/stores.mdx

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -277,32 +277,63 @@ setStore("users", store.users.length, {
277277
})
278278
```
279279

280-
### Range specification
280+
### Modifying multiple elements
281281

282-
With path syntax, you can target a subset of elements to update or modify by specifying a range of indices.
283-
You can do this using an array of values:
282+
With path syntax, you can target a subset of elements of an array,
283+
or properties of an object, by specifying an array or range of indices.
284+
285+
The most general form is to specify an array of values.
286+
For example, if `store.users` is an array of objects,
287+
you can set the `loggedIn` property of several indices at once like so:
284288

285289
```jsx
286-
setStore("users", [1, 3], "loggedIn", false)
290+
setStore("users", [2, 7, 10], "loggedIn", false)
291+
// equivalent to (but more efficient than):
292+
setStore("users", 2, "loggedIn", false)
293+
setStore("users", 7, "loggedIn", false)
294+
setStore("users", 10, "loggedIn", false)
287295
```
288296

289-
:::info
290-
If your *store* is an array, you can specify a range of indices using an object with `from` and `to` keys.
297+
This array syntax also works for object property names.
298+
For example, if `store.users` is an object mapping usernames to objects,
299+
you can set the `loggedIn` property of several users at once like so:
291300

292301
```jsx
293-
const [store, setStore] = createStore([]) // A store that is an array
294-
...
295-
setStore({ from: 1, to: store.length - 1 }, "loggedIn", false)
302+
setStore("users", ["me", "you"], "loggedIn", false)
303+
// equivalent to (but more efficient than):
304+
setStore("users", ["me"], "loggedIn", false)
305+
setStore("users", ["you"], "loggedIn", false)
296306
```
297307

298-
In addition to this, including the `by` key, can help you perform iterative updates within an array, which can be useful when you want to update elements at regular intervals.
299-
This key defines the step size for index increments, similar to a [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for):
308+
For arrays specifically, you can specify a range of indices via an object
309+
with `from` and `to` keys (both of which are inclusive).
310+
For example, assuming `store.users` is an array again,
311+
you can set the `loggedIn` state for all users except index 0 as follows:
300312

301313
```jsx
302-
setStore({ from: 0, to: store.length, by: 2 }, "loggedIn", false)
314+
setStore("users", { from: 1, to: store.users.length - 1 }, "loggedIn", false)
315+
// equivalent to (but more efficient than):
316+
for (let i = 1; i <= store.users.length - 1; i++) {
317+
setStore("users", i, "loggedIn", false)
318+
}
319+
```
320+
321+
You can also include a `by` key in a range object to specify a step size,
322+
and thereby update a regular subset of elements.
323+
For example, you can set the `loggedIn` state for even-indexed users like so:
324+
325+
```jsx
326+
setStore("users", { from: 0, to: store.users.length - 1, by: 2 }, "loggedIn", false)
327+
// equivalent to (but more efficient than):
328+
for (let i = 1; i <= store.users.length - 1; i += 2) {
329+
setStore("users", i, "loggedIn", false)
330+
}
303331
```
304332

305-
:::
333+
Multi-setter syntax differs from the "equivalent" code in one key way:
334+
a single store setter call automatically gets wrapped in a
335+
[`batch`](/reference/reactive-utilities/batch), so all the elements update
336+
at once before any downstream effects are triggered.
306337

307338
### Dynamic value assignment
308339

src/routes/solid-start/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Overview
77
SolidStart is an open source meta-framework designed to unify components that make up a web application.
88
It is built on top of [Solid](/) and uses [Vinxi](https://vinxi.vercel.app/), an agnostic Framework Bundler that combines the power of [Vite](https://vitejs.dev) and [Nitro](https://nitro.unjs.io/).
99

10-
Start avoids being opinionated by only providing the fewest amount of pieces to get you started.
10+
Start avoids being opinionated by only providing the fewest pieces to get you started.
1111
While templates are available that include many of the expected tools, SolidStart itself does not ship with a Router or Metadata library.
1212
Rather, it leaves that open for you to use any library you want.
1313

0 commit comments

Comments
 (0)