# Updating fragments

## Updating Fragments

Much like in ERB, when building pages with PropsTemplate, we use partials to extract shared views. For example:

```
views/
  application/
    _header.json.props
  posts/
    index.json.props
  comments/
    index.json.props
```

This results in duplicate JSON nodes across our Redux state:

```javascript
{
  pages: {
    "/posts": {
      data: {
        header: {
          email: "foo@foo.com"
        }
      }
    },
    "/comments": {
      data: {
        header: {
          email: "foo@foo.com"
        }
      }
    },
  }
}
```

As we mentioned in the [state shape guide](broken://pages/-MhfNkLbKPRrNTinOtNR) this is by design. To update these cross-cutting cocerns, you will have to create a reducer to iterate through each `pages` node and immutably update them. This can be error-prone, but Breezy provides tooling to make this easy.

## Fragments

To help with creating reducers, Breezy has a featured called fragments. A fragment in Breezy is a rendered partial with a given name:

```
  json.body do
    json.side_bar partial: ["application/side_bar", fragment: "some_user_side_bar_type"]
  end
```

Using the fragment functionality will create metadata about the node. This has been set up for you in `application.json.props`:

```ruby
json.data(search: path) do
  yield json
end
json.fragments json.fragments!
```

The resulting JSON looks like this:

```javascript
data: {
  ...
},
fragments: [
  { type: :some_user_side_bar_type, partial: 'application/side_bar', path: 'body.sidebar' },
]
```

{% hint style="info" %}
Fragments used in nodes that are [deferred](/breezy/dev/features/navigation.md#deferments) do not show up inside the metadata until the deferred nodes are loaded.
{% endhint %}

## Creating reducers

You can use the metadata created by fragments to update cross-cutting concerns in your reducer:

```javascript
import { getIn } from '@jho406/breezy'
import produce from "immer"

const pagesReducer = produce((draft, action) => {
  switch (action.type) {
  case UPDATE_USER_HEADER:
    for (const key in draft) {
      const { fragments } = draft[key]
      const { email } = action.payload

      fragments
        .filter({type, partial} => type === "user_side_bar" && partial === "application/side_bar")
        .forEach({path} => {
          const node = getIn(page, path)
          node.email = email
        })
    }
  }
}, { pages: {} })
```


---

# 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://jho406.gitbook.io/breezy/dev/features/updating-fragments.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.