Coming soon via the pending Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 5.9 plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party release (and the subsequent
@wordpress/data package release) are two new apis to use in implementations interacting with the
useDispatch are custom React hooks that enable a more declarative interface to registered stores in the
registry. In this post I’m going to try to give some highlights of these new apis.
What happens to
The short answer is, “nothing”!
withDispatch are still usable and are not being deprecated. In fact, under the hood they have both been refactored to use hooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. also.
There’s no pressing need to retire these interfaces so you can reliably keep on using them!
It’s hard to reuse stateful logic between components
As higher order components,
withDispatch do a great job at enhancing components to connect with the
wp.data registry. However, they contribute to the “wrapper hell” commonly experienced in large react apps where stateful logic is shared between components.
Hooks provide a better primitive for interacting with stateful logic and
useDispatch in turn provide declarative interfaces for interacting with the store state without changing component hierarchy.
Complex components become hard to understand
While much of the complexity of interacting with store state is reduced in the usage of
withDispatch. The new hooks take this a few steps further:
- The api is simplified.
- The declarative behaviour is more straightforward to follow in the context of their implementation. Instead of having multiple
withDispatch calls, you can now embed
useSelect within the components using them (or, preferably, create a custom hook implementing the multiple
useDispatch hooks and exposing only the props needed by the component).
Classes confuse both people and machines
While this applies more to hook usage in general, it does allow for not worrying as much about lifecycle methods and for implementing directly in functional components. Note,
withDispatch could also wrap functional components, but the exposure of hooks allows for integrating with the usage of other React hooks.
There will be documentation updated in @wordpress/data docs eventually, but for now, you can see the api and examples directly in the repository.
I’ve also written an overview/introduction to the hooks that gives some insight into usage.