это ловушка 24 пытается изменить реакцию конечных точек API?

Question

Итак, я создал функцию для переключения между производственным и тестовым API в моем приложении.

Проблема здесь в том, что, если я изменю его, он не будет повторно импортировать эти конечные точки из конфигурации. js. кажется, что они импортируются только один раз; при запуске приложения.

, поэтому я решил сохранить текущее состояние API в кэш-памяти, а затем восстановить его при следующем запуске, используя AsyncStorage

. Проблема заключается в том, что при перезапуске приложения эти API импортируются из конфигурации. js до того, как приложение получит список текущего состояния

. Как это исправить? есть ли способ обойти это?

Answer 1

Я думаю, что вы должны импортировать оба тестовых / производственных значения и сохранить их в компоненте root как состояние. И передайте их дочерним компонентам через механизм React Context .

Вот небольшой пример.

ConfigContext.js

export default React.createContext();

App.jsx

...
import { devConfig, prodConfig } from './config';
import Component from './Component';
import ConfigContext from './ConfigContext';

const App = () => {
  const [currentConfig, setCurrentConfig] = React.useState(devContext);

  // when you need to change the config dynamically
  setCurrentConfig(prodConfig);

  // pass the state value to the context provider
  return (
    <ConfigContext.Provider value={currentConfig}>
      <Component />
    </ConfigContext.Provider>
  );
}

и в компонентах, использующих конфигурацию:

Component.jsx

import ConfigContext from './ConfigContext';

const Component = () => {
  // obtain current 'autoupdating' config value 
  const config = React.useContext(ConfigContext);

  // use config values somehow
  return ( ... );
}

Таким образом, при изменении компонента root (* 1021) *) состояние, изменение будет автоматически распространено на дочерние компоненты, которые используют контекст.