Chrome, at least in its experimental Canary version on Android (and only for users in the U.S.), is getting an interesting update in the coming weeks that brings back RSS, the once-popular format for getting updates from all the sites you love in Google Reader and similar services.
<configuration>
<system.net>
<connectionManagement>
<add address="*" maxconnection="100" />
</connectionManagement>
</system.net>
</configuration>
import { decorate } from "mobx";
class Count {
value = 0;
}
decorate(Count, { value: observable });
const count = new Count(); const text = observable({
value: "Hello world!",
get uppercase() {
return this.value.toUpperCase();
}
}); > create-react-app state-management-with-mobx-part3 > cd state-management-with-mobx-part3 > npm start
> npm install --save mobx
<!DOCTYPE html>
<html lang="en">
<head>
<title>MobX Basics, part 3</title>
<meta charset="UTF-8" />
<link href="src/styles.css" />
</head>
<body>
<main>
<input id="text-input" />
<p id="text-display"></p>
<p id="text-display-uppercase"></p>
</main>
<script src="src/index.js"></script>
</body>
</html> import { autorun, computed, observable } from "mobx";
const input = document.getElementById("text-input");
const textDisplay = document.getElementById("text-display");
const loudDisplay = document.getElementById("text-display-uppercase");
class Text {
@observable value = "Hello World";
@computed get uppercase() {
return this.value.toUpperCase();
}
}
const text = new Text();
input.addEventListener("keyup", event => {
text.value = event.target.value;
});
autorun(() => {
input.value = text.value;
textDisplay.textContent = text.value;
loudDisplay.textContent = text.uppercase;
}); ./src/index.js
SyntaxError: \src\index.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (8:3):
6 |
7 | class Text {
> 8 | @observable value = "Hello World";
| ^
9 | @computed get uppercase() {
10 | return this.value.toUpperCase();
11 | } import { observable, computed, action } from "mobx";
class Timer {
@observable start = Date.now();
@observable current = Date.now();
@computed
get elapsedTime() {
return this.current - this.start + "milliseconds";
}
@action
tick() {
this.current = Date.now();
}
} import { observable, computed, action, decorate } from "mobx";
class Timer {
start = Date.now();
current = Date.now();
get elapsedTime() {
return this.current - this.start + "milliseconds";
}
tick() {
this.current = Date.now();
}
}
decorate(Timer, {
start: observable,
current: observable,
elapsedTime: computed,
tick: action
}); const Counter = observer(({ count }) => {
return (
// ...
);
}); > create-react-app my-proj1 --typescript
{
"compilerOptions": {
// ...
"experimentalDecorators": true
}
} > npm i --save-dev customize-cra react-app-rewired
const {
override,
addDecoratorsLegacy,
disableEsLint
} = require("customize-cra");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint()
); "scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}, {
"extends": "react-app",
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
} {
"env": {
"node": true,
"commonjs": true,
"browser": true,
"es6": true,
"mocha": true
},
"settings": {
"react": {
"version": "detect"
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"legacyDecorators": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"babel",
"react",
"react-hooks",
"react-redux",
"no-async-without-await",
"css-modules",
"filenames",
"simple-import-sort"
],
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"constructor-super": "warn",
"strict": [
"error",
"safe"
],
"no-debugger": "error",
"brace-style": [
"error",
"1tbs",
{
"allowSingleLine": true
}
],
"no-trailing-spaces": "error",
"keyword-spacing": "error",
"space-before-function-paren": [
"error",
"never"
],
"spaced-comment": [
"error",
"always"
],
"vars-on-top": "error",
"no-undef": "error",
"no-undefined": "warn",
"comma-dangle": [
"error",
"never"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
],
"guard-for-in": "error",
"no-eval": "error",
"no-with": "error",
"valid-typeof": "error",
"no-unused-vars": "error",
"no-continue": "warn",
"no-extra-semi": "warn",
"no-unreachable": "warn",
"no-unused-expressions": "warn",
"max-len": [
"warn",
80,
4
],
"react/prefer-es6-class": "warn",
"react/jsx-boolean-value": "warn",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": "off",
"react-redux/mapDispatchToProps-returns-object": "off",
"react-redux/prefer-separate-component-file": "off",
"no-async-without-await/no-async-without-await": "warn",
"css-modules/no-undef-class": "off",
"filenames/match-regex": [
"off",
"^[a-zA-Z]+\\.*\\b(typescript|module|locale|validate|test|action|api|reducer|saga)?\\b$",
true
],
"filenames/match-exported": "off",
"filenames/no-index": "off",
"simple-import-sort/sort": "error"
},
"extends": [
"react-app",
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-redux/recommended",
"plugin:css-modules/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"process": true
}
} >npm i --save-dev eslint babel-eslint eslint-config-react-app eslint-loader eslint-plugin-babel eslint-plugin-react eslint-plugin-css-modules eslint-plugin-filenames eslint-plugin-flowtype eslint-plugin-import eslint-plugin-no-async-without-await eslint-plugin-react-hooks eslint-plugin-react-redux eslint-plugin-redux-saga eslint-plugin-simple-import-sort eslint-loader typescript
const {
override,
addDecoratorsLegacy,
useEslintRc
} = require("customize-cra");
module.exports = override(
addDecoratorsLegacy(),
useEslintRc(".eslintrc.json")
); Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
} "devDependencies": {
"typescript": "^1.8.10",
"gulp": "^3.9.1",
"path": "^0.12.7",
"gulp-clean": "^0.3.2",
"fs": "^0.0.2",
"gulp-concat": "^2.6.0",
"gulp-typescript": "^2.13.1",
"gulp-tsc": "^1.1.5",
"del": "^2.2.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-cssnano": "^2.0.0",
"gulp-html-replace": "^1.5.4",
"gulp-htmlmin": "^1.0.5",
"gulp-uglify": "^1.5.3",
"merge-stream": "^1.0.0",
"systemjs-builder": "^0.15.16",
"typings": "^0.8.1"
}, var gulp = require("gulp"),
concat = require("gulp-concat"),
tsc = require("gulp-typescript"),
jsMinify = require("gulp-uglify"),
cssPrefixer = require("gulp-autoprefixer"),
cssMinify = require("gulp-cssnano"),
del = require("del"),
merge = require("merge-stream"),
minifyHTML = require('gulp-htmlmin'),
SystemBuilder = require("systemjs-builder");
var appFolder = "./app";
var outFolder = "wwwroot";
gulp.task("clean", () => {
return del(outFolder);
});
gulp.task("shims", () => {
return gulp.src([
"node_modules/es6-shim/es6-shim.js",
"node_modules/zone.js/dist/zone.js",
"node_modules/reflect-metadata/Reflect.js"
])
.pipe(concat("shims.js"))
.pipe(jsMinify())
.pipe(gulp.dest(outFolder + "/js/"));
});
gulp.task("tsc", () => {
var tsProject = tsc.createProject("./tsconfig.json");
var tsResult = gulp.src([
appFolder + "/**/*.ts"
])
.pipe(tsc(tsProject), undefined, tsc.reporter.fullReporter());
return tsResult.js.pipe(gulp.dest("build/"));
});
gulp.task("system-build", ["tsc"], () => {
var builder = new SystemBuilder();
return builder.loadConfig("systemjs.config.js")
.then(() => builder.buildStatic(appFolder, outFolder + "/js/bundle.js"))
.then(() => del("build"));
});
gulp.task("buildAndMinify", ["system-build"], () => {
var bundle = gulp.src(outFolder + "/js/bundle.js")
.pipe(jsMinify())
.pipe(gulp.dest(outFolder + "/js/"));
var css = gulp.src(outFolder + "/css/styles.css")
.pipe(cssMinify())
.pipe(gulp.dest(outFolder + "/css/"));
return merge(bundle, css);
});
gulp.task("favicon", function () {
return gulp.src("./app/favicon.ico")
.pipe(gulp.dest(outFolder));
});
gulp.task("css", function () {
return gulp.src(appFolder + "/**/*.css")
.pipe(cssPrefixer())
.pipe(cssMinify())
.pipe(gulp.dest(outFolder));
});
gulp.task("templates", function () {
return gulp.src(appFolder + "/**/*.html")
.pipe(minifyHTML())
.pipe(gulp.dest(outFolder));
});
gulp.task("assets", ["templates", "css", "favicon"], function () {
return gulp.src(appFolder + "/**/*.png")
.pipe(gulp.dest(outFolder));
});
gulp.task("otherScriptsAndStyles", () => {
gulp.src([
"jquery/dist/jquery.*js",
"bootstrap/dist/js/bootstrap*.js"
], {
cwd: "node_modules/**"
})
.pipe(gulp.dest(outFolder + "/js/"));
gulp.src([
"node_modules/bootstrap/dist/css/bootstrap.css"
]).pipe(cssMinify()).pipe(gulp.dest(outFolder + "/css/"));
gulp.src([
"node_modules/bootstrap/fonts/*.*"
]).pipe(gulp.dest(outFolder + "/fonts/"));
});
//gulp.task("watch.tsc", ["tsc"], function () {
// return gulp.watch(appFolder + "/**/*.ts", ["tsc"]);
//});
//gulp.task("watch", ["watch.tsc"]);
gulp.task("default", [
"shims",
"buildAndMinify",
"assets",
"otherScriptsAndStyles"
//,"watch"
]); var appFolder = "./app"; var outFolder = "wwwroot";
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/wwwroot/css/bootstrap.css" rel="stylesheet" />
<link href="~/wwwroot/app.component.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/wwwroot/js/shims.js"></script>
</head>
<body>
<div>
@RenderBody()
<pm-app>Loading App...</pm-app>
</div>
<script src="~/wwwroot/js/jquery/dist/jquery.min.js"></script>
<script src="~/wwwroot/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/js/bundle.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> > dotnet new react
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); > create-react-app clientapp
> cd clientapp > npm install --save bootstrap axios
import "bootstrap/dist/css/bootstrap.css";
using Microsoft.AspNetCore.Mvc;
namespace DownloadFilesSample.Controllers
{
[Route("api/[controller]")]
public class ReportsController : Controller
{
[HttpGet("[action]")]
public IActionResult GetPdfReport()
{
return File(virtualPath: "~/app_data/sample.pdf",
contentType: "application/pdf",
fileDownloadName: "sample.pdf");
}
}
} const getResults = async () => {
const { headers, data } = await axios.get(apiUrl, {
responseType: "blob"
});
} import axios from "axios";
import React, { useEffect, useState } from "react";
export default function DisplayPdf() {
const apiUrl = "https://localhost:5001/api/Reports/GetPdfReport";
const [blobInfo, setBlobInfo] = useState({
blobUrl: "",
fileName: ""
});
useEffect(() => {
getResults();
}, []);
const getResults = async () => {
try {
const { headers, data } = await axios.get(apiUrl, {
responseType: "blob"
});
console.log("headers", headers);
const pdfBlobUrl = window.URL.createObjectURL(data);
console.log("pdfBlobUrl", pdfBlobUrl);
const fileName = headers["content-disposition"]
.split(";")
.find(n => n.includes("filename="))
.replace("filename=", "")
.trim();
console.log("filename", fileName);
setBlobInfo({
blobUrl: pdfBlobUrl,
fileName: fileName
});
} catch (error) {
console.log(error);
}
}; ontent-disposition: "attachment; filename=sample.pdf; filename*=UTF-8''sample.pdf"
import axios from "axios";
import React, { useEffect, useState } from "react";
export default function DisplayPdf() {
// ...
const { blobUrl } = blobInfo;
return (
<>
<h1>Display PDF Files</h1>
<button className="btn btn-info" onClick={handlePrintPdf}>
Print PDF
</button>
<button className="btn btn-primary ml-2" onClick={handleShowPdfInNewTab}>
Show PDF in a new tab
</button>
<button className="btn btn-success ml-2" onClick={handleDownloadPdf}>
Download PDF
</button>
<section className="card mb-5 mt-3">
<div className="card-header">
<h4>using iframe</h4>
</div>
<div className="card-body">
<iframe
title="PDF Report"
width="100%"
height="600"
src={blobUrl}
type="application/pdf"
></iframe>
</div>
</section>
<section className="card mb-5">
<div className="card-header">
<h4>using object</h4>
</div>
<div className="card-body">
<object
data={blobUrl}
aria-label="PDF Report"
type="application/pdf"
width="100%"
height="100%"
></object>
</div>
</section>
<section className="card mb-5">
<div className="card-header">
<h4>using embed</h4>
</div>
<div className="card-body">
<embed
aria-label="PDF Report"
src={blobUrl}
type="application/pdf"
width="100%"
height="100%"
></embed>
</div>
</section>
</>
);
} 
const handlePrintPdf = () => {
const { blobUrl } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = blobUrl;
document.body.appendChild(iframe);
if (iframe.contentWindow) {
iframe.contentWindow.print();
}
}; const handleShowPdfInNewTab = () => {
const { blobUrl } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
window.open(blobUrl);
}; const handleDownloadPdf = () => {
const { blobUrl, fileName } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
const anchor = document.createElement("a");
anchor.style.display = "none";
anchor.href = blobUrl;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
}; <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link href="Content/css/bootstrap-rtl.css" rel="stylesheet">
<link href="Content/css/custom.css" rel="stylesheet">
</head>
<body>
</body>
</html> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Scripts/bootstrap-rtl.js"></script>
<script src="Scripts/respond.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link href="Content/css/bootstrap-rtl.css" rel="stylesheet">
<link href="Content/css/custom.css" rel="stylesheet">
<script src="Scripts/respond.min.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Scripts/bootstrap-rtl.js"></script>
</body>
</html> 
Thread.CurrentThread.CurrentUICulture = new CultureInfo("fa-IR");
Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture("fa-IR");
[Required(ErrorMessageResourceName = "ResourceKeyName", ErrorMessageResourceType = typeof(<SolutionName>.Resources.<ResourceClassName>))]
public class LocalizationDisplayNameAttribute : DisplayNameAttribute
{
private readonly DisplayAttribute _display;
public LocalizationDisplayNameAttribute(string resourceName, Type resourceType)
{
_display = new DisplayAttribute { ResourceType = resourceType, Name = resourceName };
}
public override string DisplayName
{
get
{
try
{
return _display.GetName();
}
catch (Exception)
{
return _display.Name;
}
}
}
}
public class LocalizationDisplayNameAttribute : DisplayNameAttribute
{
private readonly PropertyInfo nameProperty;
public LocalizationDisplayNameAttribute(string displayNameKey, Type resourceType = null)
: base(displayNameKey)
{
if (resourceType != null)
nameProperty = resourceType.GetProperty(base.DisplayName, BindingFlags.Static | BindingFlags.Public);
}
public override string DisplayName
{
get
{
if (nameProperty == null) base.DisplayName;
return (string)nameProperty.GetValue(nameProperty.DeclaringType, null);
}
}
}
[LocalizationDisplayName("ResourceKeyName", typeof(<SolutionName>.Resources.<ResourceClassName>))]
public class BaseController : Controller
{
private const string LanguageCookieName = "MyLanguageCookieName";
protected override void ExecuteCore()
{
var cookie = HttpContext.Request.Cookies[LanguageCookieName];
string lang;
if (cookie != null)
{
lang = cookie.Value;
}
else
{
lang = ConfigurationManager.AppSettings["DefaultCulture"] ?? "fa-IR";
var httpCookie = new HttpCookie(LanguageCookieName, lang) { Expires = DateTime.Now.AddYears(1) };
HttpContext.Response.SetCookie(httpCookie);
}
Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(lang);
base.ExecuteCore();
}
}
public class LocalizationActionFilterAttribute : ActionFilterAttribute
{
private const string LanguageCookieName = "MyLanguageCookieName";
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var cookie = filterContext.HttpContext.Request.Cookies[LanguageCookieName];
string lang;
if (cookie != null)
{
lang = cookie.Value;
}
else
{
lang = ConfigurationManager.AppSettings["DefaultCulture"] ?? "fa-IR";
var httpCookie = new HttpCookie(LanguageCookieName, lang) { Expires = DateTime.Now.AddYears(1) };
filterContext.HttpContext.Response.SetCookie(httpCookie);
}
Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(lang);
base.OnActionExecuting(filterContext);
}
}
<select id="langs" onchange="languageChanged()">
<option value="fa-IR">فارسی</option>
<option value="en-US">انگلیسی</option>
</select>
<script type="text/javascript">
function languageChanged() {
setCookie("MyLanguageCookieName", $('#langs').val(), 365);
window.location.reload();
}
document.ready = function () {
$('#langs').val(getCookie("MyLanguageCookieName"));
};
function setCookie(name, value, exdays, path) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var newValue = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()) + ((path == null) ? "" : "; path=" + path) ;
document.cookie = name + "=" + newValue;
}
function getCookie(name) {
var i, x, y, cookies = document.cookie.split(";");
for (i = 0; i < cookies.length; i++) {
x = cookies[i].substr(0, cookies[i].indexOf("="));
y = cookies[i].substr(cookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == name) {
return unescape(y);
}
}
}
</script>
GET https://www.dntips.ir HTTP/1.1 ... Accept-Language: fa-IR,en-US;q=0.5 ...
Accept-Language: fa-IR,fa;q=0.8,en-US;q=0.5,ar-BH;q=0.3
<system.web>
<globalization enableClientBasedCulture="true" uiCulture="auto" culture="auto"></globalization>
</system.web>
var langs = filterContext.HttpContext.Request.UserLanguages;
routes.MapRoute(
"Localization", // Route name
"{lang}/{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
public class BaseController : Controller
{
protected override void ExecuteCore()
{
var lang = RouteData.Values["lang"];
if (lang != null && !string.IsNullOrWhiteSpace(lang.ToString()))
{
Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(lang.ToString());
}
base.ExecuteCore();
}
}
public class BaseController : Controller
{
protected override void OnActionExecuted(ActionExecutedContext context)
{
var view = context.Result as ViewResultBase;
if (view == null) return; // not a view
var viewName = view.ViewName;
view.ViewName = GetGlobalizationViewName(viewName, context);
base.OnActionExecuted(context);
}
private static string GetGlobalizationViewName(string viewName, ControllerContext context)
{
var cultureName = Thread.CurrentThread.CurrentUICulture.Name;
if (cultureName == "en-US") return viewName; // default culture
if (string.IsNullOrEmpty(viewName))
return context.RouteData.Values["action"] + "." + cultureName; // "Index.fa"
int i;
if ((i = viewName.IndexOf('.')) > 0) // ex: Index.cshtml
return viewName.Substring(0, i + 1) + cultureName + viewName.Substring(i); // "Index.fa.cshtml"
return viewName + "." + cultureName; // "Index" ==> "Index.fa"
}
}
public sealed class RazorGlobalizationViewEngine : RazorViewEngine
{
protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
return base.CreatePartialView(controllerContext, GetGlobalizationViewPath(controllerContext, partialPath));
}
protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
{
return base.CreateView(controllerContext, GetGlobalizationViewPath(controllerContext, viewPath), masterPath);
}
private static string GetGlobalizationViewPath(ControllerContext controllerContext, string viewPath)
{
//var controllerName = controllerContext.RouteData.GetRequiredString("controller");
var request = controllerContext.HttpContext.Request;
var lang = request.Cookies["MyLanguageCookie"];
if (lang != null && !string.IsNullOrEmpty(lang.Value) && lang.Value != "en-US")
{
var localizedViewPath = Regex.Replace(viewPath, "^~/Views/", string.Format("~/Views/Globalization/{0}/", lang.Value));
if (File.Exists(request.MapPath(localizedViewPath))) viewPath = localizedViewPath;
}
return viewPath;
}
protected void Application_Start()
{
ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(new RazorGlobalizationViewEngine());
}
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema ...
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
...
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>2.0</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="RightToLeft" xml:space="preserve">
<value>false</value>
<comment>RightToleft is false in English!</comment>
</data>
</root>
import { connect } from "react-redux";
import Posts from "../components/Posts";
const mapStateToProps = state => {
console.log("PostsContainer->mapStateToProps", state);
return {
...state.postsReducer
};
};
export default connect(mapStateToProps)(Posts); const Posts = ({ posts, loading, error }) => {
return (
// ... import { useSelector } from "react-redux";
// ...
const HooksPosts = () => {
const { posts, loading, error } = useSelector(state => state.postsReducer);
return (
// ... import PostsContainer from "./containers/Posts";
function App() {
return (
<main className="container">
<PostsContainer />
</main>
);
} import HooksPosts from "./components/HooksPosts";
function App() {
return (
<main className="container">
<HooksPosts />
</main>
);
} import { connect } from "react-redux";
import { fetchPostsAsync } from "../actions";
import FetchPosts from "../components/FetchPosts";
const mapDispatchToProps = {
fetchPostsAsync
};
export default connect(null, mapDispatchToProps)(FetchPosts); const FetchPosts = ({ fetchPostsAsync }) => { import React from "react";
import { useDispatch } from "react-redux";
import { fetchPostsAsync } from "../actions";
const HooksFetchPosts = () => {
const dispatch = useDispatch();
return (
<section className="card mt-5">
<div className="card-header text-center">
<button
className="btn btn-primary"
onClick={() => dispatch(fetchPostsAsync())}
>
Fetch Posts
</button>
</div>
</section>
);
};
export default HooksFetchPosts; import HooksFetchPosts from "./components/HooksFetchPosts";
import HooksPosts from "./components/HooksPosts";
// ...
function App() {
return (
<main className="container">
<HooksFetchPosts />
<HooksPosts />
</main>
);
} import { connect } from "react-redux";
import { decrementValue, incrementValue } from "../actions";
import Counter from "../components/counter";
const mapStateToProps = (state, ownProps) => {
console.log("CounterContainer->mapStateToProps", { state, ownProps });
return {
count: state.counterReducer.count
};
};
const mapDispatchToProps = {
incrementValue,
decrementValue
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter); class Counter extends Component {
render() {
console.log("Counter->props", this.props);
const {
//counterReducer: { count },
count,
incrementValue,
decrementValue
} = this.props; import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { decrementValue, incrementValue } from "../actions";
const HooksCounter = ({ prop1 }) => {
const { count } = useSelector(state => {
console.log("HooksCounter->useSelector", { state, prop1 });
return {
count: state.counterReducer.count
};
});
const dispatch = useDispatch();
return (
// ... import HooksCounter from "./components/HooksCounter";
//...
function App() {
const prop1 = 123;
return (
<main className="container">
<HooksCounter prop1={prop1} />
</main>
);
} import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { decrementValue, incrementValue } from "../actions";
const HooksCounter = ({ prop1 }) => {
const { count } = useSelector(state => {
console.log("HooksCounter->useSelector", { state, prop1 });
return {
count: state.counterReducer.count
};
});
const dispatch = useDispatch();
return (
<section className="card mt-5">
<div className="card-body text-center">
<span className="badge m-2 badge-primary">{count}</span>
</div>
<div className="card-footer">
<div className="d-flex justify-content-center align-items-center">
<button
className="btn btn-secondary btn-sm"
onClick={() => dispatch(incrementValue())}
>
+
</button>
<button
className="btn btn-secondary btn-sm m-2"
onClick={() => dispatch(decrementValue())}
>
-
</button>
<button className="btn btn-danger btn-sm">Reset</button>
</div>
</div>
</section>
);
};
export default HooksCounter; import React from "react";
import { shallowEqual, useSelector } from "react-redux";
import Post from "./Post";
const HooksPosts = () => {
const { posts, loading, error } = useSelector(
state => state.postsReducer,
shallowEqual
);
console.log("render HooksPosts");
return (
// ... import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { UserRepositoryService } from './user-repository.service';
import { NavBarComponent } from './nav-bar.component';
import { AccountMenuComponent } from './account-menu.component';
@NgModule({
imports: [ CommonModule, RouterModule ],
exports: [ NavBarComponent, AccountMenuComponent ],
declarations: [ NavBarComponent, AccountMenuComponent ],
providers: [ UserRepositoryService ]
})
export class CoreModule { }; import { CoreModule } from "./core/core.module";
@NgModule({
imports: [
//...
CoreModule,
//...
RouterModule.forRoot(appRoutes)
],
//...
})
export class AppModule { } import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingSpinnerComponent } from './loading-spinner.component';
@NgModule({
imports: [ CommonModule ],
declarations: [ LoadingSpinnerComponent ],
exports: [ LoadingSpinnerComponent, CommonModule ],
providers: [ ]
})
export class SharedModule { }; import { CoreModule } from "./core/core.module";
import { SharedModule } from "./shared/shared.module";
@NgModule({
imports: [
//...
CoreModule,
SharedModule,
//...
RouterModule.forRoot(appRoutes)
],
//...
})
export class AppModule { } > ng g m users -m app.module --routing > ng g c users/users-list
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { UsersListComponent } from './users-list.component';
@NgModule({
imports: [ RouterModule, SharedModule ],
declarations: [ UsersListComponent ],
exports: [ ],
providers: [ ]
})
export class UsersModule { };