How to call one function to other function via redux react js

Question

react redux can possible parent component in function call child component in function. via redux.

//parent coponent
firstFun(){
    this.props.otherFuc()
}

//child component 
otherFun(){
    alert('okk')
}

Answer 1

Possible duplicate of; Call child method from parent

Redux is just for state mangement. You can acheive this without redux.

Answer 2

In redux you don't call components.

You use action that are marked up with a constant example:

export const ActionAddSomething = payload => ({
  type: 'ADD_MSG_GROUP',
  payload
});

Then you reach the action with reducer via the mark up:

export const ReducerGetSomething = (state=[], action) => {
  switch (action.type) {
        case GET_MSG_GROUP:
      return action.msg

        default:
                return state;
  }
};

Then you can have access to the result of reducer to all your components like this (components are linked from the store which is a HOC, with connect at the bottom):

import React from "react";
import { connect } from 'react-redux';


class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }


  render() {
    const { 
      ReducerGetSomething, 
    } = this.props

    return (
      <App>
        <div>{ReducerSortGroupList}</div>
      </App>
    );
  }
}

const mapStateToProps = state => ({
  ReducerGetSomething: state.ReducerSortGroupList
});

const mapDispatchToProps = dispatch => ({
});

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

You can send an action from what ever dumb component you wish to the parent like this:

import React from "react";
import { ActionAddSomething } from './actions_folder/ActionAddSomething
import { connect } from 'react-redux';


const dumbComponent = ({ ReducerSortGroupList }) => {

  return (
    <dumbComponent>
      <Button onClick={ActionAddSomething('Text sent to action')}>send something to action</Button>
      <div>{ReducerSortGroupList}</div>
    </dumbComponent>
  );
}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({
  ActionAddSomething: payload => dispatch(ActionAddSomething(payload))
});

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

Important: you notice that we import action to component from a folder where you should add all your actions for best practice, but we do not need to import the reducer as it is already imported from the HOC store via "connect".

To conclude: you can have all access to your store via every components, same for actions (import action in component).

The best practice is connect your Container (parent) to every action and reducers that your child will receive, so you do not need to call the store multiple time and get a bit performance improvment.

To pass action or reducer to child, like this for example:

Parent:

<Parent>
   <Child
      actionName={this.props.actionName}
      reducerName={this.props.reducerName}
   />
</Parent>

Child:

<Child>
  <div>{props.reducerName}</div>
  <button onClick={props.actionName('send whatever')}>send whatever</button>
</Child>

If it is confusing, it is normal, have to practice no choice^^