Использовать локальное состояние и избежать выборки данных, когда данные уже доступны? - PullRequest
Новая
       34

Использовать локальное состояние и избежать выборки данных, когда данные уже доступны?

0 голосов
/ 10 января 2020

В настоящее время у меня есть пара данных выборки API, которые, в свою очередь, требуют данные из предыдущего API для следующих API, чтобы получить необходимые данные, в зависимости от взаимодействия и маршрута. На данный момент я все это связал и хорошо работаю со своими редукторами и действиями. Но мне интересно, как я могу условно получить данные в зависимости от того, доступно ли уже локальное состояние или нет?

Моим идеальным решением было бы использовать локальное состояние, когда пользователь загружает данные в первый раз и не нужно продолжать извлекать данные об их первоначальном экземпляре. Я видел много примеров получения данных из API, но ничего такого, что давало бы пример использования локальных данных (уже извлеченных) из соображений производительности, против необходимости вызывать API каждый раз, когда человек отображает компонент / страницу.

Каков наилучший подход к решению этой ситуации?

Это то, что у меня есть, и мне было интересно, если это хороший подход?

idea.sagas.js

function shouldFetchIdeas() {
  const state = store.getState();
  if (!state.idea.ideas) {
    return true;
  } else {
    return false;
  }
}

export function* fetchIdeas({ payload: organizationId }) {
  if (shouldFetchIdeas()) {
    try {
      const fetchApi = yield axios(
        `https://api.getconflux.com/api/v1/public/${organizationId}/ideas`
      );
      yield put(fetchIdeasSuccess(fetchApi.data.rows));
    } catch (error) {
      yield put(fetchIdeasFailure(error.message));
    }
  }
}


export function* onFetchIdeasStart() {
  yield takeLatest(IdeasActionTypes.FETCH_IDEAS_START, fetchIdeas);
}

export function* ideaSagas() {
  yield all([call(onFetchIdeasStart)]);
}

В настоящее время это работает, но кажется грязным. У меня есть около 3-4 вызовов API, и то, что я показал вам выше, является примером. Есть ли альтернативный или правильный способ использовать локальное состояние без необходимости каждый раз получать данные?

В любом случае, было бы здорово услышать ваши мысли, или если есть лучший способ справиться с этим, или если бы вы могли направить меня к каким-либо решениям или любым примерам.

Заранее спасибо!

1 Ответ

1 голос
/ 13 января 2020

Вы должны использовать локальное состояние вместо выборки данных снова, чтобы обновить ваше локальное состояние и, как результат, представление. Это одна из вещей, которую пытаются достичь фреймворки, такие как redux.

Для этого используйте компонент-контейнер, который выбирает все необходимые данные и передает их в подкомпоненты на каждом маршруте: 

class App extends Component {
    componentDidMount() {
        this.props.actions.getTrailers();
        this.props.actions.getCharacters();
        this.props.actions.getFavorites();
    }

    render() {  
        return (
            <Switch>
                <Route path="/characters">
                    <Characters characters={characters} />
                </Route>
                <Route path="/favorites">
                    <Favorites favorites={favorites} />
                </Route>
                <Route path="/trailers">
                    <Trailers trailers={trailers} />
                </Route>
            </Switch>
        }
    }
}

Внутри каждого подкомпонента вы можете использовать селекторы redux для доступа к данным другого компонента. Например, <Trailers /> может обращаться к favorites и characters через селекторы или использовать свои собственные реквизиты для получения своего выделенного фрагмента данных (например, trailers).

Эта практика сокращает избыточные вызовы API и поможет вам сохранить вкладку сети в средствах разработки. Более того, это поможет субкомпоненту рендериться быстрее, поскольку вы уже предварительно извлекли их данные.

Далее, подумайте, как вы можете управлять той же практикой в ​​операциях CRUD. Каждая операция также требует вызова API. Вы можете обрабатывать их внутри редукторов и избегать повторной выборки данных для каждой операции. Это сделает ваше приложение отзывчивым.

Redux сохраняет ваше состояние, если вы не нажмете refre sh, тогда вам понадобится redux-persist.

Надеюсь, это поможет, я мог бы обновить этот ответ, так как он может потребоваться дальнейшее разъяснение.

...