Изменение предоставляемого значения на ThemeProvider не вызывает повторного рендеринга компонентов в React

Question

Я все еще новичок в React, но столкнулся со странной проблемой. На самом деле я работаю над темой перевода справа налево для арабского c языка для существующего проекта, который также использует рендеринг на стороне сервера в реакции. Сценарий таков: у нас есть собственная библиотека компонентов React, которую мы используем в нашем основном проекте. Эта библиотека компонентов имеет доступ к объекту «тема» через ThemeProvider. Я поместил один ключ с именем "textDirection" в нашу тему, и теперь я хочу, чтобы моя библиотека компонентов динамически изменяла некоторые свойства css, основанные на этой теме. но когда пользователь выбирает другой язык формы языка Dropdown, я отправляю действие хранилища избыточности, чтобы изменить theme.textDirection, но теперь для клиентской части мои компоненты библиотеки не перерисовываются.

В основном проекте на стороне клиента здесь я настройка провайдера тем из хранилища примитивов.

hydrate(
  <ThemeProvider theme={store.getState().config.theme}>
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('app'),

Теперь даже при изменении хранилища тем в примитиве theme.textDirection библиотека компонентов получает один и тот же объект темы или повторного рендеринга не происходит. Может быть, я делаю что-то не так или мой подход неправильный, может кто-нибудь, пожалуйста, помогите мне в этом сценарии.

Примечание: Я хочу очистить, Main Project использует библиотеку компонентов React, у которой есть объект темы через ThemeProvider. Теперь я хочу изменить библиотеку компонентов CSS, когда пользователь в основном проекте выбирает новый язык из выпадающего списка языков.

Answer 1

Убедитесь, что вы действительно меняете тему. С вашей точки зрения может показаться, что вы меняете его, но с ThemeProvider это может выглядеть по-другому. Он, вероятно, сравнивает тему, и если нет изменений, то он не будет повторно визуализировать. Поскольку тема является объектом, она будет сравниваться по ссылке ... Если у вас нет неизменной структуры, то у вас будет такая же ссылка, даже если у объекта разные реквизиты ..

Попробуйте это:

<ThemeProvider theme={{ ...store.getState().config.theme }}>
...
</ThemeProvider>

Это сделает тему новым объектом каждый раз - обратите внимание, что все должно быть в порядке, если у вас есть ThemeProvider на верхнем уровне, иначе это может вызвать проблемы с производительностью ...