Invoking functions on nested components in react redux
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
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
add a comment |
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
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
add a comment |
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
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
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
reactjs redux nested connect
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
asked Nov 25 '18 at 18:01
orion_kidorion_kid
115213
115213
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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);
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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);
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
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
add a comment |
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);
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
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
add a comment |
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);
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
965617
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);
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
965617
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
965617
answered Nov 25 '18 at 19:09
Shawn AndrewsShawn Andrews
965617
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
