Как не переопределять значение Context (React)?

Question

[Ostic]

Здравствуйте.
context.js

export const ctx = {
  a: 1
}

app.js

import React, {Provider} from 'react';
import {ctx} from './context';

const CTX = React.createContext(ctx);
function App() {
  return (
    <CTX.Provider value={ctx}>
       <MyComponent />
    </CTX.Provider>
  );
}

можно ли второй раз, те непосредственно в

<CTX.Provider value={ctx}>
       <MyComponent />
    </CTX.Provider>

не указывать ctx, а использовать тот, с которым контекст был создан, а то получается указывать одно и то же дважды

Answer 1

[Антон Спирин]

Вариант 1:

const CTX = React.createContext();

const App = () => (
  <CTX.Provider value={ctx}>
    <MyComponent />
  </CTX.Provider>
);

Но этот вариант не будет удобен если вы собираетесь тестировать компоненты использующие контекст.

Вариант 2:

const CTX = React.createContext(ctx);

const App = () => (
  <MyComponent />
);

Но этот вариант не будет удобен когда надо изменять значение контекста.

Поэтому, если собираетесь писать тесты, лучше передавать значение дважды, одно для тестов и одно для работы приложения.

Comments

[Ostic]

получается тогда так:

import CTX
import ctx
<CTX.Provider value={ctx}>

те два импорта, а чтобы так
context.js
export default CTX = createContext(ctx)
app.js

import CTX
<CTX.Provider>

так не получится, получается, чтобы "заряженный" контекст экспортировать, всё равно придётся определять value

[Антон Спирин]

Ostic, Если не хотите передавать два раза начальное состояние, то у вас есть два варианта.
1. Не использовать Provider. Тогда будет использовано значение по-умолчанию.
2. Не задавать значение по-умолчанию.

Значение по-умолчанию передается для удобства тестирования.

Так, как вы хотите сделать во втором примере, сделать не получится.

Документация.

[Ostic]

Антон Спирин,

1. Не использовать Provider. Тогда будет использовано значение по-умолчанию.

это как?

[Антон Спирин]

Ostic, убрать из древа компонентов Provider.
const App = () => <MyComponent />;