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

SantosGuillamot · 2024-11-14T13:56:22Z

What?

Update the custom store explanation to use thunks instead of controls.

Why?

If I am not mistaken, now that thunks are supported, it should be the recommended way of handling these use cases as explained here.

How?

I just updated the code examples in the readme.

github-actions · 2024-11-14T13:56:39Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

SantosGuillamot · 2024-11-14T13:57:22Z

packages/data/README.md

 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.


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.

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

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.

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

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.

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

SantosGuillamot · 2024-11-14T13:58:02Z

packages/data/README.md

@@ -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/).


Should we update this sentence or does it still apply?

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

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

github-actions · 2024-11-14T14:17:57Z

Flaky tests detected in 6f24f40.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11844302508
📝 Reported issues:

[Flaky Test] Should insert content using the global inserter #57525 in /test/e2e/specs/widgets/editing-widgets.spec.js
[Flaky Test] submenu click on the arrow interactions #61884 in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js

youknowriad

I didn't test the example but it looks good at first sight.

gziolo

I didn't test the example but it looks good at first sight.

Yes, it's difficult to test as the endpoint doesn't exist. There are some unit tests with examples like the following that I used for comparison:

gutenberg/packages/data/src/components/use-select/test/suspense.js

Lines 165 to 192 in a750125

    
           const store = createReduxStore( 'test', { 
        
           	reducer: ( state = {}, action ) => { 
        
           		switch ( action.type ) { 
        
           			case 'RECEIVE': 
        
           				return { ...state, [ action.endpoint ]: action.data }; 
        
           			default: 
        
           				return state; 
        
           		} 
        
           	}, 
        
           	selectors: { 
        
           		getData: ( state, endpoint ) => state[ endpoint ], 
        
           	}, 
        
           	resolvers: { 
        
           		getData: 
        
           			( endpoint ) => 
        
           			async ( { dispatch } ) => { 
        
           				const delay = endpoint === 'slow' ? 30 : 10; 
        
           				await new Promise( ( r ) => 
        
           					setTimeout( () => r(), delay ) 
        
           				); 
        
           				dispatch( { 
        
           					type: 'RECEIVE', 
        
           					endpoint, 
        
           					data: endpoint, 
        
           				} ); 
        
           			}, 
        
           	}, 
        
           } );

Overall, it's a good improvement that promotes thunks.

Mamaduka · 2024-11-15T11:02:38Z

Yes, it's difficult to test as the endpoint doesn't exist.

I think that's always been a barrier for consumers who wanted to get started with data stores. The primary example should be copy-pastable into plugin files to get you started.

We could follow up on this separately. Maybe @ryanwelcher has some ideas :)

Update store readme to use thunkgs

76622cd

SantosGuillamot added the [Type] Developer Documentation Documentation for developers label Nov 14, 2024

SantosGuillamot requested review from youknowriad and gziolo November 14, 2024 13:56

SantosGuillamot requested a review from nerrad as a code owner November 14, 2024 13:56

SantosGuillamot commented Nov 14, 2024

View reviewed changes

SantosGuillamot requested a review from Mamaduka November 14, 2024 14:00

Mamaduka requested a review from jsnajdr November 14, 2024 14:05

SantosGuillamot marked this pull request as draft November 14, 2024 14:39

SantosGuillamot added 2 commits November 14, 2024 15:41

Fix space

ccb65e1

Hide controls explanation in details

6f24f40

youknowriad approved these changes Nov 14, 2024

View reviewed changes

SantosGuillamot marked this pull request as ready for review November 14, 2024 20:14

gziolo approved these changes Nov 15, 2024

View reviewed changes

gziolo added the [Package] Data /packages/data label Nov 15, 2024

SantosGuillamot merged commit 32fe48c into trunk Nov 19, 2024
74 of 75 checks passed

SantosGuillamot deleted the update/use-thunks-in-custom-store-readme branch November 19, 2024 08:34

github-actions bot added this to the Gutenberg 19.8 milestone Nov 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

SantosGuillamot commented Nov 14, 2024

github-actions bot commented Nov 14, 2024 •

edited

Loading

SantosGuillamot Nov 14, 2024

youknowriad Nov 14, 2024

SantosGuillamot Nov 14, 2024

youknowriad Nov 14, 2024

SantosGuillamot Nov 14, 2024

gziolo Nov 15, 2024

SantosGuillamot Nov 14, 2024

gziolo Nov 15, 2024

github-actions bot commented Nov 14, 2024 •

edited

Loading

youknowriad left a comment

gziolo left a comment

Mamaduka commented Nov 15, 2024

		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.

	const store = createReduxStore( 'test', {
	reducer: ( state = {}, action ) => {
	switch ( action.type ) {
	case 'RECEIVE':
	return { ...state, [ action.endpoint ]: action.data };
	default:
	return state;
	}
	},
	selectors: {
	getData: ( state, endpoint ) => state[ endpoint ],
	},
	resolvers: {
	getData:
	( endpoint ) =>
	async ( { dispatch } ) => {
	const delay = endpoint === 'slow' ? 30 : 10;
	await new Promise( ( r ) =>
	setTimeout( () => r(), delay )
	);
	dispatch( {
	type: 'RECEIVE',
	endpoint,
	data: endpoint,
	} );
	},
	},
	} );

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

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

Conversation

SantosGuillamot commented Nov 14, 2024

What?

Why?

How?

github-actions bot commented Nov 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2024 • edited Loading

youknowriad left a comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

Mamaduka commented Nov 15, 2024

github-actions bot commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024 •

edited

Loading