Store interaction

To manage the application state Flower uses Redux, meaning that your components read from and write to the global Redux store.

Element ID

By default, components are not connected to the store. In order to do so they need to have an ID, which is basically the store key where their value is saved.

Consider the following flower, that is attached to the profile reducer:

<Flower name={loginFlow.name} elements={loginFlow.elements} reducerName='profile' />

Inside the flower there might be several input elements where the user can edit his or her profile data. To connect those elements to the store (making them controlled components) each of them must have an ID, that is used to read/write their value.

Suppose there are three input elements, with the following IDs: name, surname and age. The reducer profile will then have this structure:

{
  "profile": {
    "name": "",
    "surname": "",
    "age": ""
  }
}

Nested paths

The reducerName property can also contain dots to use nested paths. A reducerName of profile.userData would create this structure:

{
  "profile": {
    "userData": {
      "name": "",
      "surname": "",
      "age": ""
    }
  }
}

Similarly, an element ID can contain dots if you need a nested path for that element.

Absolute paths

If you need to access a key that is outside the current flower reducer, you can specify an absolute path that starts from the root reducer.

Given a flower attached to the profile reducer and the following root reducer:

{
  "loading": {},
  "profile": {}
}

You can make an element connected to a key in the loading reducer by writing the full path prepended by ^ (the caret character); for instance ^loading.someKey.

Element json configuration

If you wish to connect an element to the store, its flower.json configuration has to contain a field where you can specify the element ID, and the id of this field has to be id.

{
  "type": "component",
  "name": "Input",
  "title": "Input",
  "editing": [
    {
      "type": "Input",
      "id": "id", 
      "label": "ID"
    }
  ]
}

Now you can specify an ID in the element panel.

React component configuration

The last part is to configure the React component to read the value, and optionally to update it.

Reading the value

The component receives the value in the value prop. This prop reflects the value saved in the Redux store.

const Input = ({ value }) => <input value={value} />

Changing the value

When you give a component an ID, it also receives the onChange prop, that you can use to update the value in the Redux store.

const Input = ({ value, onChange }) => (
  <input value={value} onChange={({ target }) => onChange(target.value)}/>
)