How to pass spinning bar to another component in ReactJS
1
I am in a scenario where I have to add a spinning bar in the component say,
List.js
class List extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
//spinning bar should be displayed here
</div>
);
}}
But the spinning bar should be displayed when another method in Actions(i.e redux) is called. So How will I pass this from actions.js to the render component in List.js
Actions.js
export const getList = (listInfo) => dispatch => {
//Spinning should start here
return application.getClientInfo(userInfo).then(
listInfo => {
//spinning should stop here
return dispatch(getListInfo(listInfo))
},
error => {
return dispatch(apologize('Error in getting application'))
}
)
}
getList and ListComponent is called in main.js
main.js
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List />
</div>
);
}
So how will I add render method here that is actually to be displayed in list.js? Please help
reactjs react-redux
asked Nov 16 '18 at 5:45
Subin TSubin T
439
add a comment |
1
I am in a scenario where I have to add a spinning bar in the component say,
List.js
class List extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
//spinning bar should be displayed here
</div>
);
}}
But the spinning bar should be displayed when another method in Actions(i.e redux) is called. So How will I pass this from actions.js to the render component in List.js
Actions.js
export const getList = (listInfo) => dispatch => {
//Spinning should start here
return application.getClientInfo(userInfo).then(
listInfo => {
//spinning should stop here
return dispatch(getListInfo(listInfo))
},
error => {
return dispatch(apologize('Error in getting application'))
}
)
}
getList and ListComponent is called in main.js
main.js
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List />
</div>
);
}
So how will I add render method here that is actually to be displayed in list.js? Please help
reactjs react-redux
asked Nov 16 '18 at 5:45
Subin TSubin T
439
1
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04
add a comment |
1
1
1
I am in a scenario where I have to add a spinning bar in the component say,
List.js
class List extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
//spinning bar should be displayed here
</div>
);
}}
But the spinning bar should be displayed when another method in Actions(i.e redux) is called. So How will I pass this from actions.js to the render component in List.js
Actions.js
export const getList = (listInfo) => dispatch => {
//Spinning should start here
return application.getClientInfo(userInfo).then(
listInfo => {
//spinning should stop here
return dispatch(getListInfo(listInfo))
},
error => {
return dispatch(apologize('Error in getting application'))
}
)
}
getList and ListComponent is called in main.js
main.js
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List />
</div>
);
}
So how will I add render method here that is actually to be displayed in list.js? Please help
reactjs react-redux
asked Nov 16 '18 at 5:45
Subin TSubin T
439
I am in a scenario where I have to add a spinning bar in the component say,
List.js
class List extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
//spinning bar should be displayed here
</div>
);
}}
But the spinning bar should be displayed when another method in Actions(i.e redux) is called. So How will I pass this from actions.js to the render component in List.js
Actions.js
export const getList = (listInfo) => dispatch => {
//Spinning should start here
return application.getClientInfo(userInfo).then(
listInfo => {
//spinning should stop here
return dispatch(getListInfo(listInfo))
},
error => {
return dispatch(apologize('Error in getting application'))
}
)
}
getList and ListComponent is called in main.js
main.js
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List />
</div>
);
}
So how will I add render method here that is actually to be displayed in list.js? Please help
reactjs react-redux
reactjs react-redux
asked Nov 16 '18 at 5:45
Subin TSubin T
439
asked Nov 16 '18 at 5:45
Subin TSubin T
439
asked Nov 16 '18 at 5:45
Subin TSubin T
439
asked Nov 16 '18 at 5:45
Subin TSubin T
439
asked Nov 16 '18 at 5:45
Subin TSubin T
439
439
1
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04
add a comment |
1
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04
1
1
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04
add a comment |
1 Answer
1
active
oldest
votes
1
In your reducer, keep a loading state and dispatch an action to set and clear loading states as and when you want
class List extends Component {
constructor(props) {
super(props);
}
render() {
const { isLoading } = this.props;
return (
<div>
//spinning bar should be displayed here
{isLoading && <Spinner>}
</div>
);
}
}
Actions.js
export const spinner = isLoading => {
return {
type: actionType.SPINNER, isLoading
}
}
export const getList = (listInfo) => dispatch => {
//dispatch loading action
dispatch(spinner(true));
return application.getClientInfo(userInfo).then(
listInfo => {
dispatch(spinner(false))
return dispatch(getListInfo(listInfo))
},
error => {
dispatch(spinner(false))
return dispatch(apologize('Error in getting application'))
}
)
}
Also make sure you aren't dispatching an action in render without using suspense
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List isLoading={this.props.isLoading} />
</div>
);
}
edited Nov 16 '18 at 10:23
Subin T
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or falsedispatch(spinner(true))
– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
|
show 6 more comments
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
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%2f53332101%2fhow-to-pass-spinning-bar-to-another-component-in-reactjs%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
In your reducer, keep a loading state and dispatch an action to set and clear loading states as and when you want
class List extends Component {
constructor(props) {
super(props);
}
render() {
const { isLoading } = this.props;
return (
<div>
//spinning bar should be displayed here
{isLoading && <Spinner>}
</div>
);
}
}
Actions.js
export const spinner = isLoading => {
return {
type: actionType.SPINNER, isLoading
}
}
export const getList = (listInfo) => dispatch => {
//dispatch loading action
dispatch(spinner(true));
return application.getClientInfo(userInfo).then(
listInfo => {
dispatch(spinner(false))
return dispatch(getListInfo(listInfo))
},
error => {
dispatch(spinner(false))
return dispatch(apologize('Error in getting application'))
}
)
}
Also make sure you aren't dispatching an action in render without using suspense
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List isLoading={this.props.isLoading} />
</div>
);
}
edited Nov 16 '18 at 10:23
Subin T
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or falsedispatch(spinner(true))
– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
|
show 6 more comments
1
In your reducer, keep a loading state and dispatch an action to set and clear loading states as and when you want
class List extends Component {
constructor(props) {
super(props);
}
render() {
const { isLoading } = this.props;
return (
<div>
//spinning bar should be displayed here
{isLoading && <Spinner>}
</div>
);
}
}
Actions.js
export const spinner = isLoading => {
return {
type: actionType.SPINNER, isLoading
}
}
export const getList = (listInfo) => dispatch => {
//dispatch loading action
dispatch(spinner(true));
return application.getClientInfo(userInfo).then(
listInfo => {
dispatch(spinner(false))
return dispatch(getListInfo(listInfo))
},
error => {
dispatch(spinner(false))
return dispatch(apologize('Error in getting application'))
}
)
}
Also make sure you aren't dispatching an action in render without using suspense
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List isLoading={this.props.isLoading} />
</div>
);
}
edited Nov 16 '18 at 10:23
Subin T
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or falsedispatch(spinner(true))
– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
|
show 6 more comments
1
1
1
In your reducer, keep a loading state and dispatch an action to set and clear loading states as and when you want
class List extends Component {
constructor(props) {
super(props);
}
render() {
const { isLoading } = this.props;
return (
<div>
//spinning bar should be displayed here
{isLoading && <Spinner>}
</div>
);
}
}
Actions.js
export const spinner = isLoading => {
return {
type: actionType.SPINNER, isLoading
}
}
export const getList = (listInfo) => dispatch => {
//dispatch loading action
dispatch(spinner(true));
return application.getClientInfo(userInfo).then(
listInfo => {
dispatch(spinner(false))
return dispatch(getListInfo(listInfo))
},
error => {
dispatch(spinner(false))
return dispatch(apologize('Error in getting application'))
}
)
}
Also make sure you aren't dispatching an action in render without using suspense
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List isLoading={this.props.isLoading} />
</div>
);
}
edited Nov 16 '18 at 10:23
Subin T
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
In your reducer, keep a loading state and dispatch an action to set and clear loading states as and when you want
class List extends Component {
constructor(props) {
super(props);
}
render() {
const { isLoading } = this.props;
return (
<div>
//spinning bar should be displayed here
{isLoading && <Spinner>}
</div>
);
}
}
Actions.js
export const spinner = isLoading => {
return {
type: actionType.SPINNER, isLoading
}
}
export const getList = (listInfo) => dispatch => {
//dispatch loading action
dispatch(spinner(true));
return application.getClientInfo(userInfo).then(
listInfo => {
dispatch(spinner(false))
return dispatch(getListInfo(listInfo))
},
error => {
dispatch(spinner(false))
return dispatch(apologize('Error in getting application'))
}
)
}
Also make sure you aren't dispatching an action in render without using suspense
render() {
this.props.getClientApplication(this.props.user);
return (
<div>
<List isLoading={this.props.isLoading} />
</div>
);
}
edited Nov 16 '18 at 10:23
Subin T
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
edited Nov 16 '18 at 10:23
Subin T
439
edited Nov 16 '18 at 10:23
Subin T
439
edited Nov 16 '18 at 10:23
Subin T
439
439
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 16 '18 at 5:59
Shubham KhatriShubham Khatri
94.4k15119160
94.4k15119160
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or falsedispatch(spinner(true))
– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
|
show 6 more comments
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or falsedispatch(spinner(true))
– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
Thanks a lot. I tried this, but type is not changing from LOADING to LOADING COMPLETED.
– Subin T
Nov 16 '18 at 9:16
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
I gave a separate function like, export const spinner = isLoading => { return { type: actionType.SPINNER, isLoading } } and then in getList, dispatch(spinner('Loading'))
– Subin T
Nov 16 '18 at 9:18
shouldn't you be passing true or false
dispatch(spinner(true))– Shubham Khatri
Nov 16 '18 at 9:19
shouldn't you be passing true or false
dispatch(spinner(true))– Shubham Khatri
Nov 16 '18 at 9:19
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
yes I have passed true or false.For more clarity I used the term Loading. But the value doesn't change to false
– Subin T
Nov 16 '18 at 9:45
1
1
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
did you dispatch an action to set isLoading to false aft3er the promise resolved. also you need to handle it in the reducer as well
– Shubham Khatri
Nov 16 '18 at 9:47
|
show 6 more comments
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
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%2f53332101%2fhow-to-pass-spinning-bar-to-another-component-in-reactjs%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
1
You might want to look at render props
– dwjohnston
Nov 16 '18 at 6:04