Skip to content

Commit

Permalink
remove unused Slice; README clarifications
Browse files Browse the repository at this point in the history
  • Loading branch information
kensnyder committed Aug 13, 2024
1 parent e930564 commit bf38650
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 48 deletions.
42 changes: 23 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -435,9 +435,9 @@ describe('cartStore', () => {
### Example 2: A store used by one component

Even if a store is only used by one component, it can be a nice way to separate
concerns. And the store file doesn't necessarily need to be exported. You might
want your application to interact with the store only through its exported hooks
and functions.
concerns. And the store object itself doesn't necessarily need to be exported.
You might want your application to interact with the store only through hooks
and functions exported by your store file.

In components/Game/gameStore.ts

Expand All @@ -462,7 +462,7 @@ export function restart() {
}

export function moveBy(x: number, y: number): void {
store.setStateAt('board.user', (old: Record<string, number>) => ({
store.setStateAt('board.user', old => ({
x: old.x + x,
y: old.y + y,
}));
Expand Down Expand Up @@ -809,10 +809,10 @@ When a setter function receives a value or a function that returns a value,
React Thermals will synchronously trigger a re-render.

Keep in mind that a middleware that executes asynchronously will make all
actions synchronous. That could be a problem, for example, if an action
responds to an `<input onChange={action} />` event where the user's cursor
will not work as intended unless re-renders are synchronous. In that case, be
sure that all middleware is synchronous.
actions asynchronous. That could be a problem, for example, if an action
responds to an `<input onChange={action} />` event where the user's keyboard
cursor will not work as intended unless re-renders are synchronous. In that
case, be sure that all middleware is synchronous.

## Store Class Documentation

Expand Down Expand Up @@ -851,7 +851,8 @@ store.setState(old => Promise.resolve(old + 42));
#### Bypassing middleware, rendering and AfterUpdate event

The `options` parameter allows you to replace the state value without the usual
effects.
effects. This can be useful for plugins or testing, but not generally
necessary.

That options object has up to 4 properties:

Expand Down Expand Up @@ -901,14 +902,17 @@ store.initState(newState);

### State Getters

Generally you'll want to avoid getting the current state. Components should only
access state using `useStoreState`/`useStoreState`. Functions that update the
store should preferably pass a callback to a state setter function.

If you do need to directly set state, you have 4 choices:

| Get | Whole state | State at path |
| ------------- | ----------------- | ----------------------- |
| Current State | getState() | getStateAt(path) |
| Initial State | getInitialState() | getInitialStateAt(path) |

Generally you'll want to avoid getting the current state. Methods that update
store should preferrably pass a callback to a state setter function.

Example:

```js
Expand All @@ -917,7 +921,7 @@ const store = new Store(21);
// ✅ preferred
store.setState(old => old * 2);

// ❌ discouraged but still works fine
// ❌ discouraged but still works in most cases
store.setState(store.getState() * 2);
```

Expand All @@ -942,7 +946,7 @@ component must import the store; that way, any components loaded from

A global store can be extended at any time using `store.replaceState()`
so a global store can be defined in one file and only extended when
needed by another store.
needed by another feature.

### Suggested File Structure

Expand All @@ -955,8 +959,8 @@ For reusable components or pages with private stores, e.g. a header:

- src/components/Header/Header.jsx
- src/components/Header/Header.spec.jsx
- src/components/Header/store/headerStore.js
- src/components/Header/store/headerStore.spec.js
- src/components/Header/headerStore.js
- src/components/Header/headerStore.spec.js

### Testing stores

Expand Down Expand Up @@ -998,7 +1002,7 @@ Stores fire a series of lifecycle events. For example:

```js
store.on('BeforeInitialize', () => {
// add values to the store but don't notify or re-render
// The following adds values to the store but uses bypassAll to avoid re-render
store.mergeState({ my: 'external', initial: 'state' }, { bypassAll: true });
});
store.on('AfterLastUnmount', evt => {
Expand Down Expand Up @@ -1026,7 +1030,7 @@ The following events fire during the life cycle of the store.

#### Event data

Note that some events with a `data` property. Below is the available data for
Note that some events have a `data` property. Below is the available data for
events that support it.

| Event | event.data property |
Expand Down Expand Up @@ -1064,7 +1068,7 @@ Interested in writing your own plugins? Check out
### Middleware

React Thermals has a simple middleware system that allows modifying state
before it is saved and propagated to components.
before the store is updated and before components rerender.

Middleware examples:

Expand Down
1 change: 0 additions & 1 deletion index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export { default as Slice } from './src/classes/Slice/Slice';
export { default as Store } from './src/classes/Store/Store';
export { default as useStoreSelector } from './src/hooks/useStoreSelector/useStoreSelector';
export { default as useStoreState } from './src/hooks/useStoreState/useStoreState';
Expand Down
4 changes: 2 additions & 2 deletions src/actions/setter/setter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function setterFn<ShapeAtPath>(
};
}

type InputEvent = {
type AnyInputEvent = {
target: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
};

Expand Down Expand Up @@ -72,7 +72,7 @@ type InputEvent = {
* }
*/
export function setterInput() {
return function updater(evt: InputEvent) {
return function updater(evt: AnyInputEvent) {
return evt.target.value;
};
}
26 changes: 0 additions & 26 deletions src/classes/Slice/Slice.ts

This file was deleted.

0 comments on commit bf38650

Please sign in to comment.