1
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;

I'm new in redux and don't know how to pass and run that function in other component. It was easy not using redux, just pass as props like in example above. I have folder with actions, components, containers and reducers.

Now I have Main.js where I have

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

In MainContainer.js I got:

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);

So how I can run function myFunction() in OtherComponent.js:

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

I need to just run, not pass whole function, just execute myFunction in Main.js but action to run this function will came from OtherComponent.

Mario
  • 56
  • 1
  • 6
  • 1
    you can check this out https://stackoverflow.com/questions/40733822/how-to-pass-actions-down-to-the-components-in-redux?rq=1 – DAMMAK May 22 '19 at 09:25
  • thank you for trying helping me. It is not what I want to do. I just edited my post with more description. – Mario May 22 '19 at 10:52

2 Answers2

0

So first i have to mention that i believe that you have a misconception of redux. This isn't to allow for functions created in components to be reused in different locations. This is to move that logic to a reducer outside of your function which would allow it to be used wherever you wired it with {connect} from react-redux. So you will need a couple of files (for clarity). First you're going to need an action file which we'll name myReturnOkAction.

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

Redux Actions

This is what you're going to call in your mapDispatchToProps function where you're going to trigger this event. You're going to have to import it into your OtherComponent so import {myReturnOkAction} from "/*wherever the files exists*/" and to include it in your mapDispatchToProps as okFunction: () => dispatch(myReturnOkAction())

Once you have your action your connect Higher Order Component (HOC) wrapping your main component is going to need a Reducer to modify your current store state as well as do any actions.

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 Reducers

So the way that this is going to move is that you're function, somewhere is going to call the action. Once the action is called its going to trigger the reducer and make any changes to the store which you need. Once the reducer has updated the store with new values its then going to update any components which are connected to it through the connect HOC which will cause them to re-render with new information.

Also my favorite image to describe how redux works.

How Redux Works

I hope this helps.

demonintherough
  • 104
  • 1
  • 8
  • thank you for trying helping me. It is not what I want to do. I just edited my post with more description. – Mario May 22 '19 at 10:52
  • 1
    So as i understand it you want to run a function from another component which does a thing and not update the redux store with any information is this correct? – demonintherough May 22 '19 at 11:00
  • Almost yes! Run a function (not pass to other component) in Main component and when to run this function is, that action is coming from OtherComponent – Mario May 22 '19 at 11:06
0

I found an answer:

I still can pass as props in redux but I can't do this in this way: OtherComponent = ({executeFunctionInMainComponent}) => {}. I need to do in this way: OtherComponent = (props) => {} and then inside that component I have an access via props.executeFunctionInMainComponent

Mario
  • 56
  • 1
  • 6