React Flux - постоянное состояние в локальном хранилище

Question

Новое в React и JavaScript - Я создаю пользовательский интерфейс React для хранения числовых значений c объектов. Я посмотрел вокруг, и поток кажется хорошей основой для того, что я пытаюсь сделать ...

По сути, на странице будет массив объектов, сопоставленных со значениями, где пользователь может изменить один или несколько значения на переднем конце и сохранить значения. Тем не менее, у меня пока нет API для GET или PUT, поэтому сейчас я просто использую объект stati c json. Вот что у меня есть:

//team_ratings.json
[
  {
    "name": "Arsenal",
    "rating": 1.25
  },
  {
    "name": "Aston Villa",
    "rating": 2.5
  },
  {
    "name": "Bournemouth",
    "rating": 2.2 
  }
]

У меня есть appDispatcher.js, как показано ниже:

import {Dispatcher} from 'flux';
const dispatcher = new Dispatcher();
export default dispatcher;

В моей папке действий у меня есть два файла:

//actionTypes.js

export default {
  UPDATE_RATINGS: 'UPDATE_RATINGS',
};

//ratingsActions.js

import dispatcher from '../appDispatcher';
import * as ratingsApi from '../api/ratingsApi';
import actionTypes from './actionTypes';

export function saveRatings(...ratings) {

return null;
}

Так что теперь я застрял. ratings - это массив, который я хочу обновить с помощью функции saveRatings(ratings). В конце концов у меня будет API, чтобы поставить новый рейтинг. Я не уверен, как сохранить изменения сейчас в рамках флюса ... Можно ли пока сохранить его в localStorage, и если да, то как он обрабатывает изменения массива?

Это компонент что я буду sh изменить:

import React from 'react';
import {Table} from 'react-bootstrap';
import NumericInput from 'react-numeric-input';
import Teams from '../assets/Teams.js';

const TeamIcon = styled.span`
    margin-right: 0.5em;
  `;

const teams = Teams;

function Display() {
  return (
      <div>
        <RatingsGrid />
      </div>
  );
}


function RatingsGrid() {
  return (
    <Table striped bordered hover size="sm">
      <thead>
        <tr>
          <th>Teams</th>
          <th>Ratings</th>
        </tr>
      </thead>
      <tbody>
        {teams.map(team => (
          <tr key={team.id}>
            <td>
              <TeamIcon>
                <span>
                  <img src={team.icon} className="icon" height="42" width="42" alt={team.name}/>
                </span>
              </TeamIcon>
              {team.name}
            </td>
            <td><NumericInput step={0.01} mobile={false} size="14" /></td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default Display;