# Redux | React

### Browser Entwickler Tool

Falls du Gutenberg Entwickler bist, dann kann ich dir wärmstens das Chrome bzw. Firefox Plugin weiterempfehlen. Dort kannst du zugleich alle States herauslesen und manipulieren. 

![](/files/-LnCmfkbQp0Y0UecBdtz)

**Hier sind die Links:** \
[Google Chrome Plugin](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\
[Firefox Plugin](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)

### Dispatch | Einfaches Beispiel mit wp.data

<div align="left"><img src="/files/-LnCsF5ZkoQX2xuIVut5" alt=""></div>

Das Package "**wp.data**" wird standardmäßig von Gutenberg mitgeliefert. Dort findest du viele weitere Funktionen, um die Aktionen von Gutenberg zu managen. &#x20;

#### Gutenberg Sidebar zuklappen mittels React &#x20;

Als erstes importieren wir uns die Funktion **dispatch** von dem Package "**wp.data**".

```javascript
import { dispatch } from '@wordpress/data';
```

Mit dieser Funktion können wir die **States** verändern bzw. manipulieren. &#x20;

```jsx
<Button onClick={ ( event ) => {  dispatch('core/edit-post').closeGeneralSidebar()  }   }>
    Sidebar schließen
</Button>
```

Von der Konsole aus kann man dieses Script verwenden:\
`wp.data.dispatch('core/edit-post').openGeneralSidebar();`

#### Gutenberg Sidebar aufklappen mittels React &#x20;

```jsx
<Button onClick={ ( event ) => {  dispatch('core/edit-post').openGeneralSidebar('edit-post/document')  }   }>
    Sidebar öffnen
</Button>
```

Von der Konsole aus kann man dieses Script verwenden:

`wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/document')`

![](/files/-LnCsSupPAvjwcoWoLge)

{% hint style="info" %}
Weitere tolle Hooks findest du hier: <https://github.com/WordPress/gutenberg/tree/master/packages/edit-post>
{% endhint %}

### Withstate | React State Funktion

In React wird in einem Class Component ein State Objekt geschrieben mit Zuweisungen.\
Diese dienen als Default zum Arbeiten. Beispiel: **HeadlineActive: false**&#x20;

WordPress bietet diese Funktion auch direkt im Core an und diese heißt WithState. Die Schreibweise ist etwas seltsam, aber zum effektiven Arbeiten lohnt sich dies. Ich persönlich arbeite direkt mit den internen WordPress Attributen. \
\
Diese sind in meiner Meinung nach effektiver, weil WordPress ständig Revisionen machen und alle Eingaben direkt speichert. Dies kann natürlich auf Zeit so einigen Datenmüll erzeugen. Aber dafür gibt es gute WordPress Cleaning Tools. Aber dafür freuen sich die User, falls der PC ausging oder der Browser abstürzt die geschriebenen Inhalte immer noch da sind. \
\
**Hier ein Beispiel mit WithSate:**&#x20;

```jsx
import { CheckboxControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';
 
const MyCheckboxControl = withState( {
    isChecked: true,
} )( ( { isChecked, setState } ) => (
    <CheckboxControl
        heading="User"
        label="Is author"
        help="Is the user a author or not?"
        checked={ isChecked }
        onChange={ ( isChecked ) => { setState( { isChecked } ) } }
    />
) );
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://benjaminzekavica.gitbook.io/gutenberg/components/redux-or-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.