title: Strategy for data management in React
body: <h1>Context / Background</h1>
  
  <p>In a few projects now, I seem to face a common problem, and I still don't feel like I have created a solid way of tackling it. </p>
  
  <p>I am using React, Redux, and React Router.  </p>
  
  <h1>Current state</h1>
  
  <p>In it's simplest, I have a page, with a series of saveable forms all of which can exist in both a view mode and an edit mode:</p>
  
  <pre><code>+--------------------------+
  | EDIT MODE                |
  +--------------------------+
  |                          |
  |  &lt;input name="A"/&gt;       |
  |  &lt;input name="B"/&gt;       |
  |                          |
  |  &lt;button label="save"/&gt;  |
  +--------------------------+
  |                          |
  |  &lt;input name="C"/&gt;       |
  |  &lt;input name="D"/&gt;       |
  |                          |
  |  &lt;button label="save"/&gt;  | 
  +--------------------------+
  
  +--------------------------+
  | VIEW MODE         [edit] |
  +--------------------------+
  |  readonly A              |
  |  readonly B              |
  |                          |
  |  readonly A              |
  |  readonly B              |
  +--------------------------+
  </code></pre>
  
  <p>All the forms are wrapped up in a Request component, which takes a endpoint prop, and on mount will fetch the data. Once the request is complete it will render its children.</p>
  
  <p>Sample page: url: <code>owner/1/pets</code></p>
  
  <pre><code>const ownerId = props.params.id;
  
  &lt;Request endpoint={`api/owner/{ownerId}/pets`}&gt;
      &lt;OwnerDetails id={ownerId} /&gt;     
      &lt;Pets ownerId={ownerId} /&gt;
    }}
  &lt;/Request&gt;
  </code></pre>
  
  <p>Reducer after request succeeds (noting already normalised):</p>
  
  <pre><code>{
      "tables": {
          "pets": {
              "1": { "id":"1", "name":"max", "owner": 1 },
              "2": { "id":"2", "name":"yella", "owner": 1 }
          },
          "owner": {
              "1": { "id":"1", "name": "jim" }
          }
      }
  }
  </code></pre>
  
  <p>Then each Form is a connected component, and knows the slice of state it needs based on a simple passed in id. </p>
  
  <p>Each Form also has an onChange action, that gets passed to each form input. onChange updates a "draft" slice of state. </p>
  
  <p>So when the user types in the following input while in edit mode of pet 1:</p>
  
  <p></p>
  
  <p>The full state looks like:</p>
  
  <pre><code>{
      "tables": {
          "pets": {
              "1": { "id":"1", "name":"max", "owner": 1 },
              "2": { "id":"2", "name":"yella", "owner": 1 }
          },
          "owner": {
              "1": { "id":"1", "name": "jim" }
          }
      },
      "draft": {
          "pets": {
              "1": { "name": "new name" },
          }
      }
  }
  </code></pre>
  
  <h1>Actions / Reducers</h1>
  
  <pre><code>onChange =&gt; # updates the draft slice of state
  save =&gt;     # sends all data in draft to the server to be saved, upon being saved, the draft slice for that particular form is emptied, and table slice is updated with new data - in other words, the table slice is always the latest reflection of the server. 
  </code></pre>
  
  <p>Connected forms will grab and merge table state with draft state to "get the full picture" when in edit mode. So if we're at the current reducer state above, and looking at pet 1, the connected form will grab all of tables.pets.1 data, then merge over the top draft.pets.1 data. In view mode, it only needs to grab the tables data (draft data is ignored in view mode). </p>
  
  <h1>The problem</h1>
  
  <p>This feels somewhat overcooked. It feels awkward to extract and merge draft and table data, even when using selectors. The problems of updating and pulling data from store slices of state are exacerbated when forms can have nested elements. </p>
  
  <h1>The question</h1>
  
  <p>What is a more concrete strategy of dealing with complex, multiple forms that can exist in a draft and state? </p>