Альтернатива getState для повторяющихся переменных в Redux - PullRequest
Новая
       2

Альтернатива getState для повторяющихся переменных в Redux

1 голос
/ 19 июня 2019

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

1 Ответ

2 голосов
/ 19 июня 2019

Звучит как хороший кандидат на использование Context .

Вот вымышленный пример того, как вы можете установить идентификатор клиента на высоком уровне, но ссылаться на него во вложенных компонентах без необходимости каждый раз запрашивать хранилище Redux, используя Hooks :

Приложение 

const ClientContext = React.createContext(null);

function App(props) {
  return (
    <ClientContext.Provider value={props.clientId}>
      <MyApiComponent />
    </ClientContext>
  )
}

const mapStateToProps = getState => ({
  clientId: getState().clientId
})

export default connect(mapStateToProps, {})(App);

Таким образом, нам нужно только подключить App к хранилищу, чтобы получить идентификатор клиента, затем, используя Context, мы можем сделать это значение доступным для вложенныхкомпоненты.Мы можем использовать useContext для извлечения этого значения в каждый компонент 

function MyApiComponent() {
  const clientId = useContext(ClientContext);
  ...
  return <MyNestedApiComponent />;
}

function MyNestedApiComponent() {
  const clientId = useContext(ClientContext);
  ...
}

Независимо от того, используете ли вы компонент или функцию класса, принцип тот же - используется Contextподелиться глобальным состоянием вплоть до вложенных компонентов.

...