Блог

Главная - Вопросы по программированию - Реализовать дерево состояний пользовательского интерфейса Redux?

Реализовать дерево состояний пользовательского интерфейса Redux?

#reactjs #redux

#reactjs #упрощение

Вопрос:

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

Но я не знаю, как сообщить Redux о том, что компонент React был смонтирован / размонтирован, потому что у самого компонента нет информации о его месте в дереве React. Допустим, у нас есть список из трех компонентов React в нашем основном App.js:

 <div>
  <ClickCounter />
  <ClickCounter />
  <ClickCounter />
</div>

Здесь реализован ClickCounter:

 import React from 'react'

function ClickCounter() {
  const clicks = useSelector(state => state.UI.ClickCounter[/* What is my id?*/].clicks)

  return (
    <div>
    </div>
  )
}

export default ClickCounter

Эта одинокая ClickCounter функция не знает, была ли она вызвана первой, второй или третьей <ClickCounter /> . Нет информации о дереве React на уровне компонента — нет синхронизации с Redux.

Я застрял и не знаю, как это реализовать. Заранее спасибо за ваше время!

Комментарии:

1. Вам следует подробнее ознакомиться с redux документацией. Во-первых, чтобы изменить состояние в redux, ваш компонент должен отправить action (как объект), это действие затем фиксируется reducer , затем в редукторе вы можете решить, что делать с другим случаем отправленных действий. Кроме того, вы должны использовать connect для подключения вашего компонента к action creators и redux state