In most of my projects, I compose a "base.js" that brings in settings and environment configuration. It attaches to a global of __BASE__ … I then have another base.js inside my project that maps and exports portions out of __BASE__ for other portions of my project to use. This way I can test those pieces separately and __BASE__ is never part of my source maps.
I have a separate config/settings project that composes yaml files for deployment(s) into configuration JSON ... this is combined server-side to response to a request for `/base.js` which injects the appropriate values for the application as loaded.
Been using the redux hooks for a project, and really been enjoying it. My actions modules are exposing a default useActions that wraps useReducer, useMemo and bindActions which keeps the action bindings with the actions instead of each component, which has been really nice.
import { useMemo } from 'react';
import { bindActionCreators } from 'redux';
import { useDispatch } from 'react-redux';
...
const doSomething = (input) => ({ type: 'sometype', ... });
...
...
export default deps => {
const dispatch = useDispatch();
return useMemo(
() =>
bindActionCreators(
{
doSomething,
...
},
dispatch
),
deps ? [dispatch, ...deps] : [dispatch]
);
};
Irked that the React Material Admin[1] project doesn't link to the github source.. but the flathub page that kind of hides it. Also, material-ui[2] in and of itself is probably the single best component library for any web platform.
[1] https://github.com/flatlogic/react-material-admin
[2] https://material-ui.com/
Don't use the className like this... use a ref, it's what they're there for. Or you can at least use the event's target attribute...
playAudio(e) {
e.target.parentNode.getElementsByTagName("audio")[0].play()
}
Been using the redux hooks for a project, and really been enjoying it. My actions modules are exposing a default useActions that wraps useReducer, useMemo and bindActions which keeps the action bindings with the actions instead of each component, which has been really nice. import { useMemo } from 'react'; import { bindActionCreators } from 'redux'; import { useDispatch } from 'react-redux'; ... const doSomething = (input) => ({ type: 'sometype', ... }); ... ... export default deps => { const dispatch = useDispatch(); return useMemo( () => bindActionCreators( { doSomething, ... }, dispatch ), deps ? [dispatch, ...deps] : [dispatch] ); };Don't use the className like this... use a ref, it's what they're there for. Or you can at least use the event's target attribute... playAudio(e) { e.target.parentNode.getElementsByTagName("audio")[0].play() }