React, Redux - передать функцию из компонента A в другие компоненты - PullRequest
Новая
       50

React, Redux - передать функцию из компонента A в другие компоненты

0 голосов
/ 22 мая 2019 
import React from "react";
import OtherComponent from "./OtherComponent";

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.runMyFunction = this.runMyFunction.bind(this);
    this.myFunction = this.myFunction.bind(this);
  }

  runMyFunction(event) {
    event.preventDefault();
    this.myFunction();
  }

  myFunction() {
    return console.log("I was executed in Main.js");
  }

  render() {
    return (
      <div>
        <OtherComponent runMyFunction={this.runMyFunction} />
      </div>
    );
  }
}
export default Main;

import React from "react";

class OtherComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.runMyFunction();
  }

  render() {
    return (
      <div>
       <button onClick={this.handleClick} />Click me to execute function from Main </button>
      </div>
    );
  }
}

export default OtherComponent;

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

Теперь у меня есть Main.js, где у меня 

import React from "react";
const Main = ({data, getData}) => {
  const myFunction = () => {
    return "ok";
  };
  return (
    <div>
      <p>This is main component</p>
    </div>
  );
};
export default Main;

В MainContainer.js Я получил: 

import Main from "../../components/Main/Main";
import { connect } from "react-redux";
import {
  getData
} from "../../actions";

function mapStateToProps(state) {
  return {
    data: state.main.data
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    getData: () => dispatch(getData())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Main);

Итак, как я могу запустить функцию myFunction () в OtherComponent.js: 

import React from "react";
const OtherComponent = ({executeFunctionInMainComponent}) => {
  return (
    <div>
      <button onClick={executeFunctionInMainComponent}>run action</button>
    </div>
  );
};
export default OtherComponent;

Мне нужно просто запустить, не передавать всю функцию, просто выполнить myFunction в Main.js, но действие для запуска этой функции будетпришло от OtherComponent.

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Я нашел ответ:

Я все еще могу передавать как реквизиты в редуксе, но я не могу сделать это следующим образом: OtherComponent = ({executeFunctionInMainComponent}) => {}. Мне нужно сделать следующим образом: OtherComponent = (props) => {}, а затем внутри этого компонента у меня есть доступ через props.executeFunctionInMainComponent

0 голосов
/ 22 мая 2019

Итак, сначала я должен упомянуть, что я считаю, что у вас неправильное представление о редуксе. Это не позволяет повторно использовать функции, созданные в компонентах, в разных местах. Это делается для того, чтобы переместить эту логику в редуктор за пределы вашей функции, что позволило бы использовать его везде, где вы подключили его к {connect} из response-redux. Так что вам понадобится пара файлов (для ясности). Сначала вам понадобится файл действия, который мы назовем myReturnOkAction. 

export const myReturnOkAction = (/*optional payload*/) => {
  return {
    type: 'PRINT_OK',
  }
}

Redux Actions

Это то, что вы собираетесь вызывать в функции mapDispatchToProps, где вы собираетесь запускать это событие. Вам нужно будет импортировать его в ваш OtherComponent, чтобы import {myReturnOkAction} from "/*wherever the files exists*/", и включить его в mapDispatchToProps как okFunction: () => dispatch(myReturnOkAction())

После того, как вы выполните действие, ваш connect Компонент высшего порядка (HOC), обертывающий ваш основной компонент, будет нуждаться в редукторе для изменения текущего состояния хранилища, а также для выполнения любых действий. 

export const myReturnOkReducer = (state, action) => {
  if(action.type === 'PRINT_OK'){
    /*This is where you update your global state*/
    /*i.e. return {...store, valueWanted: ok}*/
  }else{
    return state
  }
}

Редукторы Redux

Таким образом, способ, которым это будет двигаться, заключается в том, что вы функция, где-то будет вызывать действие. Как только действие вызывается, оно запускает редуктор и вносит любые изменения в нужное вам хранилище. Как только редуктор обновит хранилище новыми значениями, он будет обновлять любые компоненты, которые connect ed к нему через connect HOC, что заставит их повторно выполнить рендеринг с новой информацией.

Также мое любимое изображение, чтобы описать, как работает Redux.

How Redux Works* * 1030

Надеюсь, это поможет.

...