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

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.

вы можете проверить это stackoverflow.com/questions/40733822/…

DAMMAK 22.05.2019 11:25

спасибо за попытку помочь мне. Это не то, чем я хочу заниматься. Я только что отредактировал свой пост с дополнительным описанием.

Mario 22.05.2019 12:52
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
2
6 353
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

Редукс действия

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

После того, как у вас есть действие, вашему компоненту высшего порядка (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
  }
}

Редукторные редукторы

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

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

How Redux Works

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

спасибо за попытку помочь мне. Это не то, чем я хочу заниматься. Я только что отредактировал свой пост с дополнительным описанием.

Mario 22.05.2019 12:52

Насколько я понимаю, вы хотите запустить функцию из другого компонента, который что-то делает, а не обновлять хранилище избыточности какой-либо информацией, правильно ли это?

demonintherough 22.05.2019 13:00

Почти да! Запустите функцию (не переходите к другому компоненту) в основном компоненте, и когда запускать эту функцию, это действие исходит от OtherComponent

Mario 22.05.2019 13:06
Ответ принят как подходящий

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

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

Можете ли вы уточнить больше

Raymond the Developer 01.03.2021 08:14

Другие вопросы по теме