ReduceStore (Flux): функции массива (pu sh, splice) не обновляют состояние - PullRequest
Новая
       70

ReduceStore (Flux): функции массива (pu sh, splice) не обновляют состояние

0 голосов
/ 19 июня 2020

Ниже представлена ​​выдержка из моего магазина (расширяет другой магазин, который расширяет ReduceStore [Flux]). Это хранилище используется в компоненте React, который каким-то образом не обновляет свое представление при вызове функций storeUser или removeUser. Представление отображается только для обновленных пользователей при перезагрузке страницы.

Напротив, функция storeUsers обновляет представление. Как это происходит и что мне нужно изменить, чтобы изменения массива через pu sh и splice также были зарегистрированы?

Примечание: часть массива ["users"] не работает существуют до вызова storeUsers, поэтому эта часть добавляется в массив заново. На момент вызова storeUser или removeUser array[index]["users"] уже существует. Все функции ниже вызываются внутри reduce(state, action). 

// save users after they are loaded ('getUsers' call)
  storeUsers(state, action) {
    let scenarioID = action.scenarioID;
    state.forEach((element, index, array) => {
      if (element.id === scenarioID) {
        array[index]["users"] = action.users;
        this.__emitChange();
        return state;
      }
    })
  }

  // save new user after it was added to scenario ('addUser' call)
  storeUser(state, action) {
    let scenarioID = action.scenarioID;
    state.forEach((element, index, array) => {
      if (element.id === scenarioID) {
        array[index]["users"].push(action.user);
        this.__emitChange();
        return state;
      }
    })
  }

  // remove user from ScenarioStore
  removeUser(state, action) {
    let scenarioID = action.scenarioID;
    state.forEach((element, index, array) => {
      if (element.id === scenarioID) {
        const userindex = array[index]["users"].indexOf(action.user);
        if (index > -1) {
          array[index]["users"].splice(userindex, 1);
          this.__emitChange();
        }
        return state;
      }
    })
  }

Извлечения из компонента React, в котором используется 'ScenarioStore':

calculateState: 

static calculateState(prevState, props) {
   const scenario = ScenarioStore.getState().find(s => s.id === parseInt(props.match.params.scenario, 10));
...
return {
      scenario,
...

рендерить: 

...
      <h2>Users</h2>
      <div>
        <Table data={this.state.scenario.users}>
          <TableColumn title='Name' dataKey='username' link='/users/' linkKey='id' />
          <TableColumn title='Mail' dataKey='mail' />
        </Table>
...
...