Контейнер, передающий this.props другой функции, передает копию - PullRequest
0 голосов
/ 30 октября 2018

Я использую Redux с StructuredSelectors, Reduce-Actions и Connect (реагировать-Redux) в качестве HOC в компоненте. Где я привязал некоторый диспетчер и некоторые селекторы к своему контейнеру.

Теперь я хочу передать часть своей логики контейнера в некоторые другие файлы / функции, эти функции должны использовать диспетчер и выбранные свойства моего контейнера (this.props моего контейнера).

допустим, у меня есть функция с именем demo:

function demo(props){
  // here is my logic where I work with some dispatchers 
  // and selected store properties of my container
}

теперь внутри моего контейнера я вызываю демонстрационную функцию, как эта

function CONTAINER_FUNC_XXX(){
    demo(this.props) 
}

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

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

-------------------------------------------- ------------------ РЕДАКТИРОВАТЬ ------------------------------- ----------------------------

Вот лучший пример проблемы.

когда вызывается мой mouseController.mouseDown, сначала я запускаю demoDispatcher, который вызывает редуктор, этот редуктор манипулирует demoStoreProp (на самом деле это свойство является массивом, который сбрасывается в пустой массив). Когда я регистрирую demoStoreProp внутри mouseController, он возвращает мне неправильное свойство. Поскольку все мои действия диспетчера выполняются синхронно, я заключаю, что аргумент props в моей функции контроллера является копией.

CONATINER

// MY CONTAINER APP

import * as mouseController from './mouseController'

class App extends React.Component {

   componentDidMount(){
     ...
     // here I am registering the classes/containers handleMouseDown function 
     // on the global/windows onmousedown event
     window.onmousedown = (e) => this.handleMouseDown(e);
     ...
   }

   handleMouseDown(e){
      // CONTROLLER CALL
      mouseController.mouseDown(e, this.props);

      // LOGS CORRECT VAR (empty array)
      console.log(this.props.demoStoreProp)
  };

  ...

}


// here are my store selected properties
const mapStateToProps = createStructuredSelector({
  ...
  demoStoreProp : [SELECTOR FUNC INSERTING THE PROP INTO THE CONTAINERS PROPS]
  ...
})

// here are my dispatcher properties
const mapStateToDispatch = {
  ...
  demoDispatch : [AN ACTION FROM AN ACTION CREATOR]
  ...
}

export default connect(
    mapStateToProps,
    mapStateToDispatch
)(App)

CONTROLLER

export function mouseDown(e, props){

  // calling the dispatcher with props
  props.demoDispatch();

  // LOGS WRONG VAR (filled array)
  console.log(props.demoStoreProp)

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...