Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update custom store readme to use thunks instead of controls #67006

Merged
merged 3 commits into from
Nov 19, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions packages/data/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,6 @@ const actions = {
discountPercent,
};
},

fetchFromAPI( path ) {
return {
type: 'FETCH_FROM_API',
path,
};
},
};

const store = createReduxStore( 'my-shop', {
Expand Down Expand Up @@ -84,17 +77,11 @@ const store = createReduxStore( 'my-shop', {
},
},

controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},

resolvers: {
*getPrice( item ) {
getPrice: ( item ) => async ({ dispatch }) => { {
const path = '/wp/v2/prices/' + item;
const price = yield actions.fetchFromAPI( path );
return actions.setPrice( item, price );
const price = await apiFetch( { path } );
dispatch.setPrice( item, price );
},
},
} );
Expand Down Expand Up @@ -133,8 +120,12 @@ A **resolver** is a side-effect for a selector. If your selector result may need

The `resolvers` option should be passed as an object where each key is the name of the selector to act upon, the value a function which receives the same arguments passed to the selector, excluding the state argument. It can then dispatch as necessary to fulfill the requirements of the selector, taking advantage of the fact that most data consumers will subscribe to subsequent state changes (by `subscribe` or `withSelect`).

Resolvers, in combination with [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async), can be used to implement asynchronous data flows for your store.

#### `controls`

> To handle asynchronous data flows, it is recommended to use [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async) instead of `controls` now that they are supported.

A **control** defines the execution flow behavior associated with a specific action type. This can be particularly useful in implementing asynchronous data flows for your store. By defining your action creator or resolvers as a generator which yields specific controlled action types, the execution will proceed as defined by the control handler.

The `controls` option should be passed as an object where each key is the name of the action type to act upon, the value a function which receives the original action object. It should returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure what to do with the controls section. Should it be refactored? Removed? I am not familiar with how controls are used.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we hide it in a "details" kind of? and mark it as "deprecated"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried that in this commit: 6f24f40?short_path=f874ff4#diff-f874ff4a9c60876a3d01ac27950807424eead31c2cd914daa34136108bd03e0f. Let me know if that's not what you had in mind. I am not sure if it needs to be changed somewhere else.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's basically what I had in mind. I wonder if will translate properly to the block editor handbook when published.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw that the Interactivity API readmes have a bunch of <details> (example) and they seem to look fine in the block editor handbook (example). Although it's true in this case I'm adding different elements.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes perfect sense to mark the controls as deprecated 👍🏻

Expand Down Expand Up @@ -262,7 +253,7 @@ The data module shares many of the same [core principles](https://redux.js.org/i

The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/HEAD/packages/compose/README.md)).

The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [controls](#controls). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/).
The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/).
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update this sentence or does it still apply?

These differ slightly from standard redux async solutions like redux-thunk or redux-saga.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jsnajdr might know the answer. I don't think it's a blocker for merging, though.


Specific implementation differences from Redux and React Redux:

Expand Down
Loading