From 76622cd3572754561cb4bf540ffe0d75877cc08d Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 14 Nov 2024 14:51:50 +0100 Subject: [PATCH 1/3] Update store readme to use thunkgs --- packages/data/README.md | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/data/README.md b/packages/data/README.md index 25dd75820fb5db..5476311d38b8ec 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -42,13 +42,6 @@ const actions = { discountPercent, }; }, - - fetchFromAPI( path ) { - return { - type: 'FETCH_FROM_API', - path, - }; - }, }; const store = createReduxStore( 'my-shop', { @@ -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 ); }, }, } ); @@ -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. @@ -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/). Specific implementation differences from Redux and React Redux: From ccb65e1f50d32fc07b94c3fb1f5d6987a9503d46 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 14 Nov 2024 15:41:10 +0100 Subject: [PATCH 2/3] Fix space --- packages/data/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/data/README.md b/packages/data/README.md index 5476311d38b8ec..dc0379edc82fa6 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -120,7 +120,7 @@ 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. +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` From 6f24f40701503a5e2e16dd5f017130a841139de4 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 14 Nov 2024 20:38:01 +0100 Subject: [PATCH 3/3] Hide controls explanation in `details` --- packages/data/README.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/data/README.md b/packages/data/README.md index dc0379edc82fa6..b6e0e03b1d8b72 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -122,15 +122,19 @@ The `resolvers` option should be passed as an object where each key is the name 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. - -Refer to the [documentation of `@wordpress/redux-routine`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/redux-routine/README.md) for more information. +#### `controls` (deprecated) + +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`. + +
+ View controls explanation +
+A control defines the execution flow behavior associated with a specific action type. Before thunks, controls were used to implement 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. +

+Refer to the documentation of @wordpress/redux-routine for more information. +
#### `initialState`