:fire: Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.
hi guys.. what is the best practice of implementing a theme into react-boilerplate ?
i have implemented sigma theme into react-boilerplate, i put the main theme code in containers/App/index.js
and for the dashboard page it display as expected. Then i add login page to my app, and the login page also display beside the navbar.
What i expected is the login page consist of that page only, didn't have navbar from the containers/App/index.js.
Any idea / docs that i should read to define which page will inherit the containers/App/index.js and which page will not inherit it ?
my sample app is located at :
https://github.com/cumibulat/PrimeJ2H
Module not found: Error: Can't resolve 'primereact' in '/Users/mjc128/Desktop/react-boilerplate'
@ dll reactBoilerplateDeps
Steps i have taken: created my application using the npm start command to run the dev server. I have now completed the app and want to run a build that will spit out production code. Now that i have the production code how to i use it?
hi @smanunta have you check this docs https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/commands.md ?
if you have run the npm run build command, then you will get your production code in build folder. I copy that build folder content to my Apache HTTP Server, i use apache http to server my app.
here is the code from app/homepage/saga.js
i want to know if we can get and pass errors that exists in body of the request inside catch block, because err.response is a promise, i do not know how to get errors from body, currently it uses statusText for errors
export function* getRepos() {
// Select username from store
const username = yield select(makeSelectUsername());
const requestURL = https://api.github.com/users/${username}/repos?type=all&sort=updated;
try {
// Call our request helper (see 'utils/request')
const repos = yield call(request, requestURL);
yield put(reposLoaded(repos, username));
} catch (err) {
yield put(repoLoadingError(err));
}
}
offline-plugin but this one is installed outside of React context. any advice or example would be greatly appreciated, thanks !
onUpdated callback function and dispatch a custom showNotif action. What do you think ?
i've read https://zach.codes/handling-client-side-app-updates-with-service-workers/ which is shown as a best practice in several tutorials / threads.
But it doesn't look ideal for me, since it means that user has to navigate in your app in order to get latest version.
In my case, i would like to be sure that if a user directly goes to a specific route, and doesn't browse at all,
he still gets notified that his app version isn't the latest ...
Hi, I'm new to this room but have been using react-boilerplate for a while now. I have a query about nested Redux states and would really appreciate it if someone can help me figure this out.
As per the redux docs, it's most advisable to keep the redux state separated as domains.
{
simpleDomainData1: {....},
simpleDomainData2: {....},
entities : {
entityType1 : {....},
entityType2 : {....}
},
ui : {
uiSection1 : {....},
uiSection2 : {....}
}
}How do achieve this data structure in react-boilerplate? I have been creating my Containers using the built-in generators, and keeping them all at the same level like so:
App
|__ Components
|__ Containers
|__ Container1
|__ Container2
|__ Container3
|__ Container4
:
:My redux state is super normalized like so:
{
route: {
location: {
....
}
},
container1: {
data: {}
},
container2: {
data: {}
},
container3: {
data: {}
},
container4: {
data: {}
}
}But I am now at a place where I need to nest Containers 2 and 3 within Container 1 (according to the business logic). How can I also mirror this structure on my redux store?
{
route: {
location: {
....
}
},
container1: {
data: {
container2: {
data: {...}
},
container3: {
data: {...}
},
}
},
container4: {
data: {}
}
}How can we use injectReducer to implement nested states? Or is there another approach that you all use? TIA!!
I have tried having all of the reducers for Container1 defined under /Container1, thereby giving me control of the whole state, but that seems like an anti-pattern
I haven't yet tried nesting Containers 2 and 3 inside Container1 because I couldn't figure out how the injectReducer util would work under those circumstances.
I'm using react-boilerplate for almost half a year. And my question is... Do I really need reducers & saga asynchronous injections?
Seems like that is very small part of code, but sometimes it's very inconvenient when I can't use reducers from other component that is not loaded.
Maybe someone can explain what's the point of not loading all sagas and reducers when user is logging in to the app? Is there real performance difference?
Maybe I should use provider-components that won't render anything and only have some reducers and sagas logic? For example authProvider component that has all auth reducers and sagas and I can include it wherever I want. Or only include its saga, reducers with injectSaga({ key: 'authProvider', saga });
BTW, if you think that putting sagas-reducers in the dumb component is a bad idea, what do you think about using TopBar for such purposes? :) I have TopBar on all pages in the dashboard, so I can put all sagas-reducers in this component as a dirty hack.
@agmm If you are in a component wrapper in withRouter, you can just do something like this:
function Component(props) {
console.log(props.match, props.location);
}
.
.
export default withRouter(Component);If your component is wrapper in the withRouter HoC, match, location etc will be passed in as props