Invoking functions on nested components in react redux












0















Sorry if this question displays a lack of understanding of the react paradigm which I suspect it does however I am very new to the tech.



I want to dispatch an action from my 'actions' code which should ultimately call a function on a nested component. Up to now I have been simply modifying state by dispatching actions and catching them in the reducer which works fine.



I am working on a portlet as part of a wider framework and I can capture an onExport() message in the actions. From here I have no idea of the best way to call the nested component (I need access to the inner ag-grid in the nested component to export it).



I have considered introducing some new 'exportRequested' state flag and setting this in the reducer then using componentDidReceiveProps in the nested component. I have also been studying the 'connect' idea and this seems right in so far as it would allow me to expose the function and connect it to the store but I can't seem to join the dots and figure out how to invoke it from the reducer. Is there some way to sort of dispatch an action and catch it directly in the nested component?



some code:



Container:



import {initData} from '/actions';

export class MainComponent extends PureComponent {
static propTypes = {
initData: func.isRequired,
data: array.isRequired,
};

static defaultProps = {
data: ,
};

componentDidMount() {
this.props.initData();
}

render() {
const { data } = this.props;
return (
<div>
<ChildGrid data={data} />
</div>
);
}
}

export default connect(
state => ({
data: getData(state),
}),
{ initData }
)(MainComponent);


Nested Grid:



export class ChildGrid extends PureComponent {

static propTypes = {
data: array.isRequired,
};

static defaultProps = {
data: ,
};

exportData() {
// HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
}

render() {
const { data } = this.props;
return (
<div>
<DataGrid
rowData={data}
/>
</div>
);
}
}









share|improve this question



























    0















    Sorry if this question displays a lack of understanding of the react paradigm which I suspect it does however I am very new to the tech.



    I want to dispatch an action from my 'actions' code which should ultimately call a function on a nested component. Up to now I have been simply modifying state by dispatching actions and catching them in the reducer which works fine.



    I am working on a portlet as part of a wider framework and I can capture an onExport() message in the actions. From here I have no idea of the best way to call the nested component (I need access to the inner ag-grid in the nested component to export it).



    I have considered introducing some new 'exportRequested' state flag and setting this in the reducer then using componentDidReceiveProps in the nested component. I have also been studying the 'connect' idea and this seems right in so far as it would allow me to expose the function and connect it to the store but I can't seem to join the dots and figure out how to invoke it from the reducer. Is there some way to sort of dispatch an action and catch it directly in the nested component?



    some code:



    Container:



    import {initData} from '/actions';

    export class MainComponent extends PureComponent {
    static propTypes = {
    initData: func.isRequired,
    data: array.isRequired,
    };

    static defaultProps = {
    data: ,
    };

    componentDidMount() {
    this.props.initData();
    }

    render() {
    const { data } = this.props;
    return (
    <div>
    <ChildGrid data={data} />
    </div>
    );
    }
    }

    export default connect(
    state => ({
    data: getData(state),
    }),
    { initData }
    )(MainComponent);


    Nested Grid:



    export class ChildGrid extends PureComponent {

    static propTypes = {
    data: array.isRequired,
    };

    static defaultProps = {
    data: ,
    };

    exportData() {
    // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
    }

    render() {
    const { data } = this.props;
    return (
    <div>
    <DataGrid
    rowData={data}
    />
    </div>
    );
    }
    }









    share|improve this question

























      0












      0








      0








      Sorry if this question displays a lack of understanding of the react paradigm which I suspect it does however I am very new to the tech.



      I want to dispatch an action from my 'actions' code which should ultimately call a function on a nested component. Up to now I have been simply modifying state by dispatching actions and catching them in the reducer which works fine.



      I am working on a portlet as part of a wider framework and I can capture an onExport() message in the actions. From here I have no idea of the best way to call the nested component (I need access to the inner ag-grid in the nested component to export it).



      I have considered introducing some new 'exportRequested' state flag and setting this in the reducer then using componentDidReceiveProps in the nested component. I have also been studying the 'connect' idea and this seems right in so far as it would allow me to expose the function and connect it to the store but I can't seem to join the dots and figure out how to invoke it from the reducer. Is there some way to sort of dispatch an action and catch it directly in the nested component?



      some code:



      Container:



      import {initData} from '/actions';

      export class MainComponent extends PureComponent {
      static propTypes = {
      initData: func.isRequired,
      data: array.isRequired,
      };

      static defaultProps = {
      data: ,
      };

      componentDidMount() {
      this.props.initData();
      }

      render() {
      const { data } = this.props;
      return (
      <div>
      <ChildGrid data={data} />
      </div>
      );
      }
      }

      export default connect(
      state => ({
      data: getData(state),
      }),
      { initData }
      )(MainComponent);


      Nested Grid:



      export class ChildGrid extends PureComponent {

      static propTypes = {
      data: array.isRequired,
      };

      static defaultProps = {
      data: ,
      };

      exportData() {
      // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
      }

      render() {
      const { data } = this.props;
      return (
      <div>
      <DataGrid
      rowData={data}
      />
      </div>
      );
      }
      }









      share|improve this question














      Sorry if this question displays a lack of understanding of the react paradigm which I suspect it does however I am very new to the tech.



      I want to dispatch an action from my 'actions' code which should ultimately call a function on a nested component. Up to now I have been simply modifying state by dispatching actions and catching them in the reducer which works fine.



      I am working on a portlet as part of a wider framework and I can capture an onExport() message in the actions. From here I have no idea of the best way to call the nested component (I need access to the inner ag-grid in the nested component to export it).



      I have considered introducing some new 'exportRequested' state flag and setting this in the reducer then using componentDidReceiveProps in the nested component. I have also been studying the 'connect' idea and this seems right in so far as it would allow me to expose the function and connect it to the store but I can't seem to join the dots and figure out how to invoke it from the reducer. Is there some way to sort of dispatch an action and catch it directly in the nested component?



      some code:



      Container:



      import {initData} from '/actions';

      export class MainComponent extends PureComponent {
      static propTypes = {
      initData: func.isRequired,
      data: array.isRequired,
      };

      static defaultProps = {
      data: ,
      };

      componentDidMount() {
      this.props.initData();
      }

      render() {
      const { data } = this.props;
      return (
      <div>
      <ChildGrid data={data} />
      </div>
      );
      }
      }

      export default connect(
      state => ({
      data: getData(state),
      }),
      { initData }
      )(MainComponent);


      Nested Grid:



      export class ChildGrid extends PureComponent {

      static propTypes = {
      data: array.isRequired,
      };

      static defaultProps = {
      data: ,
      };

      exportData() {
      // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
      }

      render() {
      const { data } = this.props;
      return (
      <div>
      <DataGrid
      rowData={data}
      />
      </div>
      );
      }
      }






      reactjs redux nested connect






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 25 '18 at 18:01









      orion_kidorion_kid

      115213




      115213
























          1 Answer
          1






          active

          oldest

          votes


















          1














          You thought of the correct solution to your problem, by creating a state flag in your redux store then listening to the change of that property in your nested component. Unfortunately in Redux we can't listen to specific events or specific state property changes of the Redux store.



          The implementation of such a solution is as follows:



          ChildGrid.jsx



          class ChildGrid extends PureComponent {

          static propTypes = {
          data: array.isRequired,
          };

          static defaultProps = {
          data: ,
          };

          componentWillReceiveProps(newProps) {
          if (newProps.exportRequested) {
          this.exportData();
          }
          }

          exportData() {
          DataGrid.gridApi.exportAsCsv();
          }

          render() {
          const { data } = this.props;
          return (
          <div>
          <DataGrid
          rowData={data}
          />
          </div>
          );
          }
          }

          const mapStateToProps = (state) => {
          return {
          reduxExportRequested: state.exportRequested
          };
          };

          export default connect(mapStateToProps)(ChildGrid);





          share|improve this answer



















          • 1





            Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

            – orion_kid
            Nov 27 '18 at 17:50











          • Unfortunately this is the standard and best solution currently available

            – Shawn Andrews
            Nov 27 '18 at 18:07











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470325%2finvoking-functions-on-nested-components-in-react-redux%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          You thought of the correct solution to your problem, by creating a state flag in your redux store then listening to the change of that property in your nested component. Unfortunately in Redux we can't listen to specific events or specific state property changes of the Redux store.



          The implementation of such a solution is as follows:



          ChildGrid.jsx



          class ChildGrid extends PureComponent {

          static propTypes = {
          data: array.isRequired,
          };

          static defaultProps = {
          data: ,
          };

          componentWillReceiveProps(newProps) {
          if (newProps.exportRequested) {
          this.exportData();
          }
          }

          exportData() {
          DataGrid.gridApi.exportAsCsv();
          }

          render() {
          const { data } = this.props;
          return (
          <div>
          <DataGrid
          rowData={data}
          />
          </div>
          );
          }
          }

          const mapStateToProps = (state) => {
          return {
          reduxExportRequested: state.exportRequested
          };
          };

          export default connect(mapStateToProps)(ChildGrid);





          share|improve this answer



















          • 1





            Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

            – orion_kid
            Nov 27 '18 at 17:50











          • Unfortunately this is the standard and best solution currently available

            – Shawn Andrews
            Nov 27 '18 at 18:07
















          1














          You thought of the correct solution to your problem, by creating a state flag in your redux store then listening to the change of that property in your nested component. Unfortunately in Redux we can't listen to specific events or specific state property changes of the Redux store.



          The implementation of such a solution is as follows:



          ChildGrid.jsx



          class ChildGrid extends PureComponent {

          static propTypes = {
          data: array.isRequired,
          };

          static defaultProps = {
          data: ,
          };

          componentWillReceiveProps(newProps) {
          if (newProps.exportRequested) {
          this.exportData();
          }
          }

          exportData() {
          DataGrid.gridApi.exportAsCsv();
          }

          render() {
          const { data } = this.props;
          return (
          <div>
          <DataGrid
          rowData={data}
          />
          </div>
          );
          }
          }

          const mapStateToProps = (state) => {
          return {
          reduxExportRequested: state.exportRequested
          };
          };

          export default connect(mapStateToProps)(ChildGrid);





          share|improve this answer



















          • 1





            Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

            – orion_kid
            Nov 27 '18 at 17:50











          • Unfortunately this is the standard and best solution currently available

            – Shawn Andrews
            Nov 27 '18 at 18:07














          1












          1








          1







          You thought of the correct solution to your problem, by creating a state flag in your redux store then listening to the change of that property in your nested component. Unfortunately in Redux we can't listen to specific events or specific state property changes of the Redux store.



          The implementation of such a solution is as follows:



          ChildGrid.jsx



          class ChildGrid extends PureComponent {

          static propTypes = {
          data: array.isRequired,
          };

          static defaultProps = {
          data: ,
          };

          componentWillReceiveProps(newProps) {
          if (newProps.exportRequested) {
          this.exportData();
          }
          }

          exportData() {
          DataGrid.gridApi.exportAsCsv();
          }

          render() {
          const { data } = this.props;
          return (
          <div>
          <DataGrid
          rowData={data}
          />
          </div>
          );
          }
          }

          const mapStateToProps = (state) => {
          return {
          reduxExportRequested: state.exportRequested
          };
          };

          export default connect(mapStateToProps)(ChildGrid);





          share|improve this answer













          You thought of the correct solution to your problem, by creating a state flag in your redux store then listening to the change of that property in your nested component. Unfortunately in Redux we can't listen to specific events or specific state property changes of the Redux store.



          The implementation of such a solution is as follows:



          ChildGrid.jsx



          class ChildGrid extends PureComponent {

          static propTypes = {
          data: array.isRequired,
          };

          static defaultProps = {
          data: ,
          };

          componentWillReceiveProps(newProps) {
          if (newProps.exportRequested) {
          this.exportData();
          }
          }

          exportData() {
          DataGrid.gridApi.exportAsCsv();
          }

          render() {
          const { data } = this.props;
          return (
          <div>
          <DataGrid
          rowData={data}
          />
          </div>
          );
          }
          }

          const mapStateToProps = (state) => {
          return {
          reduxExportRequested: state.exportRequested
          };
          };

          export default connect(mapStateToProps)(ChildGrid);






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 25 '18 at 19:09









          Shawn AndrewsShawn Andrews

          965617




          965617








          • 1





            Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

            – orion_kid
            Nov 27 '18 at 17:50











          • Unfortunately this is the standard and best solution currently available

            – Shawn Andrews
            Nov 27 '18 at 18:07














          • 1





            Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

            – orion_kid
            Nov 27 '18 at 17:50











          • Unfortunately this is the standard and best solution currently available

            – Shawn Andrews
            Nov 27 '18 at 18:07








          1




          1





          Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

          – orion_kid
          Nov 27 '18 at 17:50





          Thanks this worked for me. But it seems pretty clunky - is it recommended usage or a kind of anti-pattern ?

          – orion_kid
          Nov 27 '18 at 17:50













          Unfortunately this is the standard and best solution currently available

          – Shawn Andrews
          Nov 27 '18 at 18:07





          Unfortunately this is the standard and best solution currently available

          – Shawn Andrews
          Nov 27 '18 at 18:07




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470325%2finvoking-functions-on-nested-components-in-react-redux%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          404 Error Contact Form 7 ajax form submitting

          How to know if a Active Directory user can login interactively

          TypeError: fit_transform() missing 1 required positional argument: 'X'