Many Agents

It is possible to create many agents in any place of the react tree. The only requirement is that each agent must be unique identified in its area.

(Check that you already have it installed and enabled and already familiar with simple way Direct mapping)

Agent may be unique identified based on its props. The easiest way is define some prop name (bearing prop) which contain unique idetifier (bearing key).

Bearing key and prop

The createAgent function creates an agent component. It receives the through area name as the first param. The second param can be a name of bearing prop or a bearing key builder function.

When agent is created with a name of bearing prop at second param the second param the unique value of agent will be taken from that prop:

const Agent = createAgent('area', 'id')

When we render two agents with different key in property id:

  <div>
    <Agent id='first' name='Master' />
    <Agent id='second' name='Slave' />
  </div>

then we receive all props from that agents of the area using throughArea higher-order components creator function:

Then we receive all that props from all agents of the area using throughArea higher-order components creator function:

import {throughArea} from 'react-through'

const Container = ({first, second}) => (
  <ul>
    <li>Master name: {first.name}</li>
    <li>Slave name: {second.name}</li>
  </ul>
)

export default throughArea('indicator')(Container)

Note: function throughArea is used to map whole area instead of throughDirect which is used to direct mapping agent props to container.

Bearing key builder

The function throughArea accepts the bearing key builder function as a second argument. The bearing key builder function accepts props of its agent and must return value of bearing key.

It is possible to define the bearing key based on number of props or add some constant value or math or any other. For example, to use bearing key based on two props x and y the through agent can be created like this:

If the second argument is not specified the bearing key will be identity equal to string value default. Default value is used by Direct mapping. See API for details.

const Agent = createAgent( 'area', ({x, y}) => x + '_' + y )