We Keep Coding

Is this a good practice? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I`m doing a project with react and I decided to make routes functionality a little different, I put the routes details to an separated file as an array: , and on the routes component I iterate through the array using the map function:
. But I don't know if what I did is something recommended, do you think it's better to put the routes in a static way directly in the component or is there a better solution?

It is better to use the useRoutes function provided by the react-router-dom package.
This makes your code shorter and authentication can be added easily using this procedure.
This way, you can define the main routes as an object like:
routes = (loggedIn) => [
{
path: '/',
children: [
// unprotected routes here
]
},
{
path: '/main',
element: loggedIn ? <Layout /> : <Navigate to='/login' />
children: [
// protected routes here
]
}
]
Then return useRoutes in the route component like:
const { loggedIn } = useSelector((state) => state.auth);
return useRoutes(routes(loggedIn), '');
useRoutes API: https://reactrouter.com/docs/en/v6/api#useroutes

react redirect to another page after login [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to redirect to another page after a successful login. After I am getting the following error.

You are breaking the rules of hooks. The error is that you call useHistory within the function, they can only be called from functional component bodies and other react hooks. Login is a class-based component so it needs to either receive route props by being rendered directly by a Route, or be wrapped in the withRouter HOC.
Easy for sure solution is to use the withRouter HOC. This injects the route props.
If you want to truly redirect then I also suggest using history.replace so if the user later hits the back button or does a back navigation they don't hit your login component again.
import { withRouter } from 'react-router-dom';
class Login extends Component {
...
responseGoogle = (response) => {
...
this.props.history.replace("/admin/dashboard"); // <-- access history from props
};
...
}
export default withRouter(Login);

useHistory didn't work on class component.its for Functional component.You need to use withRouter or from the props.You can refer this doc for more https://reactrouter.com/web/api/withRouter. https://reactrouter.com/web/example/auth-workflow

import { Redirect } from 'react-router-dom';
responseGoogle = (response) => {
return <Redirect to='/admin/dashboard'/>
};

What should we use, #Input & #Output decorators or Services in Angular? What would be the correct use case for each of the features? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
What should we use, #Input & #Output decorators or Services in Angular? What would be the correct use case for each of the features?
I have read about one use case for each.
Higher class components --> Use Services
Lower class components (Closely related) ---> Use input and output decorators
Can anyone elaborate and explain to clarify?

#Input (Parent to Child Relationship) -> If you want to pass data from Parent to Child component for example
Component A is Parent and Component B is a child that time we will use #Input
decorator into child component which is B
// app.component.ts (Parent)
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: <div><child [count]="cnt"></child></div>
})
export class AppComponent {
cnt: number = 10;
}
// Child...
import { Component, Input } from '#angular/core';
#Component({...})
export class ChildComponent {
#Input()
cnt: number = 0;
}
#Output (Child to Parent Relationship) - When you want to pass data from child to parent with EventEmitter
#Output() public eventName:EventEmitter = new EventEmitter();
No relationship between components - Then used shared service to pass data from component A to Component Z

How to load modules on a route in Angular 8? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to import a module I've created in the app to be loaded on a certain route which has it's own routing within

You need to have Routes.forChild(routes) in your custom modules' .module.ts file
then in your main routing load your module lazily
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: () => CustomModule
}
];

As of Angular 8 the new way to import child routes is this:
{path: "user", loadChildren: () => import("./users/user.module").then(m => m.UserModule)};
Angular team did this to be more consistent with next ES and also this will be understood by the IDEs, webpack, etc.

What Omair said is correct, however I'm answering as well for the sake of having options.
You can also do this, if you prefer:
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: 'src/app/path/to/your/module/custom.module#CustomModule'
}
];

ECMA 6, React Native and Redux: what does this syntactic sugar mean? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Lots of question I came up with while looking at an react native redux example project. Can anyone point me to a document where those advanced syntactic sugar will be explained?
For instance:
import React, { AppRegistry } from 'react-native';
Why is AppRegistry in {}, and what is the functional difference to the import of React and the import of AppRegistry?
What happens with this import-statement:
import * as types from '../actions/actionTypes';
Will they be imported as an array?
Another thing:
render() {
const { state, actions } = this.props;
return (
<Counter
counter={state.count}
{...actions} />
);
}
What will be passed to the Counter-Component? and where are the actions-variable came from? it is destructed from this.props, but in the caller nothing will be passed. Also: the spread operator in
<Counter/>
, will this append another arguments as they would passed with comma separated variable names?
Another thing:
export default function counter(state = initialState, action = {}) {
switch (action.type) {
case types.INCREMENT:
return {
...state,
count: state.count + 1
};
What does the return-statement really return? The spread operator and a property called "count", will they be merged together, if the spread-operator already contains a variable called "count"?
Also, the project contains a simple file called index.js in the reducers folder with the following plain content:
import counter from './counter';
export {
counter
};
Does it make sense?
I'm asking because this project is named as example application for using redux in react native, but i think it is to completed for learning purposes. And i am not sure, if everything makes sense here on the structure. But my really question is to clarify these syntactic sugar elements i found there

That's a lot of questions; most of them have nothing to do with React/Redux; they're really about EcmaScript 2015/2016/next. Maybe you'd like to re-phrase your question? Anyway, here's my two cents':
Why is AppRegistry in {}, and what is the functional difference to the import of React and the import of AppRegistry?
What happens with this import-statement:
Here's a little explanation about ES2015 imports. Consider two files:
// A.js
export default 1;
export const two = 2;
// B.js
import one from "./A";
import { two } from "./A";
console.log(one); // 1
console.log(two); // 2
This is (roughly) executed like:
// A.js
module.exports = {
default: 1,
two: 2
};
// B.js
var one = require("./A").default;
var two = require("./A").two;
You will notice that in ES2015, curly braces can be used in the import statement to denote that you only want to import a specific export, but not the whole module.
If you omit the curly braces, you will only import the default export.
You can also use asterisks to import all exports (that is the default export and all other named exports) into one binding. For example,
import * as everything from "./A";
should more or less be transpiled to:
var everything = require("./A");
Now, everything is an object with bindings to every export as seen above.
Thus, everything.default === 1 and everything.two === 2.
What will be passed to the Counter-Component?
Only state.count and an argument list of all actions.
What does the return-statement really return?
The object
{
...state,
count: state.count + 1
}
contains an object spread property. Assuming state is
{
a: 1,
b: 2
}
it will transpile to:
{
a: 1,
b: 2,
count: state.count + 1
}
Also, the project contains a simple file called index.js in the reducers folder with the following plain content […]
Does it make sense?
Importing modules just to export them can make sense in projects where the internals shouldn't be imported directly. I haven't had a look at this particular project, so I'm not in the right place to judge whether this makes sense in this project or not; anyway, there's a shorter syntax for that, too:
export { counter } from "./counter";

I dont know of we should ask question like that on Stackoverflow, cause mostly it indicates you are still learning both ES6, and React, and you are not asking about a specific issue.
Anyway to get started quickly you will need to understand ES6, and React, and I would recommend to get started here:
Learn ES6 with Babel
React Simplified
P.S: ignore the title from andrew ray blog, his post is really great.

brief summary in code form:
// the same:
let { propertyName } = { propertyName: 1, otherPropertyName: 2 };
var propertyName = { propertyName: 1, otherPropertyName: 2}.propertyName;
import * as types from '../actions/actionTypes';
var types = require('../actions/actionTypes');
// where "types" is set to the "exports" object in actionTypes.js
// essentially "spreads" or merges all of state's values into the object
let obj = {
...state,
count: state.count + 1
};
var obj = _.merge( state, {count: state.count + 1 } ); //underscore merge
var obj = Object.assign( state, {count: state.count + 1 } ); //ES6 Object.assign function for merging
// for loop merge objects
var obj = {};
for ( var x in state ) if (state.hasOwnProperty(x)) obj[x] = state[x];
obj.count = state.count + 1;
For CounterComponent, it just merges the actions object into its CounterComponent's props.
It's basically same as:
//spread version
CounterComponents({
counter: state.count,
...actions
});
//underscore merge
CounterComponents(_.merge({
counter: state.count,
}, actions));
//es6 merge
CounterComponents(Object.assign({
counter: state.count,
}, actions));