Introducing redux in existing web application (JSP) with ReactJS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
javascript reactjs jsp redux react-redux
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
add a comment |
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
javascript reactjs jsp redux react-redux
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
1
You need to create a singlestoresomewhere and pass it to multipleProvidercomponents for each of your components that you render separately
– UjinT34
Nov 23 '18 at 17:33
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36
add a comment |
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
javascript reactjs jsp redux react-redux
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
javascript reactjs jsp redux react-redux
javascript reactjs jsp redux react-redux
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
edited Nov 23 '18 at 18:37
Zoe
13.4k85386
13.4k85386
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
asked Nov 23 '18 at 17:23
pumpkinzzzpumpkinzzz
2,1612819
2,1612819
1
You need to create a singlestoresomewhere and pass it to multipleProvidercomponents for each of your components that you render separately
– UjinT34
Nov 23 '18 at 17:33
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36
add a comment |
1
You need to create a singlestoresomewhere and pass it to multipleProvidercomponents for each of your components that you render separately
– UjinT34
Nov 23 '18 at 17:33
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36
1
1
You need to create a single
store somewhere and pass it to multiple Provider components for each of your components that you render separately– UjinT34
Nov 23 '18 at 17:33
You need to create a single
store somewhere and pass it to multiple Provider components for each of your components that you render separately– UjinT34
Nov 23 '18 at 17:33
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36
add a comment |
1 Answer
1
active
oldest
votes
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
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%2f53450784%2fintroducing-redux-in-existing-web-application-jsp-with-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
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
add a comment |
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
add a comment |
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
answered Nov 23 '18 at 20:30
Shawn AndrewsShawn Andrews
965719
965719
add a comment |
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%2f53450784%2fintroducing-redux-in-existing-web-application-jsp-with-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 need to create a single
storesomewhere and pass it to multipleProvidercomponents for each of your components that you render separately– UjinT34
Nov 23 '18 at 17:33
ahhhhh @Ujin i thought i could create just one Provider element (dunno why), i'll try out, thank you
– pumpkinzzz
Nov 23 '18 at 17:36