2019年1月28日 星期一

Redux Thunk

What's a thunk?

Thunk廣泛指的是: 延後執行的wrapper。

// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;

// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;

Thunk in Redux:

在Redux中的Thunk應用則是指"延後執行Dispatch"。

Thunk middleware 會幫助dispatch async action, 等待action 執行完畢後再 dispatch 內容至store，達到非同步。

這個dispatch 的內容並非帶值的 action，而是一個async function，執行完畢前皆未有值；執行完畢後，此async function 將另外寫一個dispatch，自行再次dispatch至store (這次的dispatch就如同一般的同步disptch function一樣)。
於 沒有留言:
標籤： , , ,

2019年1月22日 星期二

React: Useful Resource

Styling:
- semantic ui (cdn: https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css )


Fake data:
- faker.js (npm install --save faker)
- JSONPlaceholder


Logical process:
- Lo (npm install --save lodash)


Frequent Use:
- redux
- react-redux
- axios
- redux-thunk
- react-router-dom
- redux-form
於 沒有留言:

2018年7月10日 星期二

ASP.NET MVC Multi Language: 多國語言 功能

1. Establish Resource directory, add new item > resource files. (.resx) 




Note: Add the GlobalRes.resx file with all the content that you need to translate. Here I have a English version as GlobalRes.resx and Chinese version as GlobalRes.zh-TW.resx. Notice that you need to feel the ISO country code for the postfix data name. 

  1. Set type to Strings 
  2. Access Modifier as Public 
  3. In properties, set Build Action to Embedded Resource.


2. Controller for language change. (And view for Index())

using System.Globalization;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace IrsaWebStore.Controllers
{
public class LanguageController : Controller
{
// GET: Language
public ActionResult Index()
{
return View();
}

public ActionResult Change(string LanguageAbbreviation)
{
if(LanguageAbbreviation != null)
{
Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(LanguageAbbreviation);
Thread.CurrentThread.CurrentUICulture = new CultureInfo(LanguageAbbreviation);
}

HttpCookie cookie = new HttpCookie("Language")
{
Value = LanguageAbbreviation
};
Response.Cookies.Add(cookie);

return View("Index");
}
}
}




Note: Add new controller in Controller folder.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@IrsaWebStore.Resources.GlobalRes.Language</h2>

<ul>
<li>@Html.ActionLink(@IrsaWebStore.Resources.GlobalRes.English, "Change", "Language", new { LanguageAbbreviation = "en" }, null)</li>
<li>@Html.ActionLink(@IrsaWebStore.Resources.GlobalRes.Chinese_tw, "Change", "Language", new { LanguageAbbreviation = "zh-TW" }, null)</li>
</ul>

3. In Global.asax

protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpCookie cookie = HttpContext.Current.Request.Cookies["Language"];

if (cookie != null && cookie.Value != null)
{
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(cookie.Value);
System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(cookie.Value);
}
else
{
HttpContext.Current.Response.AppendCookie(new HttpCookie("Language"));
HttpContext.Current.Request.Cookies["Language"].Value = "zh-TW";
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("zh-TW");
System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("zh-TW");
}

}

Note: Here I set zh-TW as default cookie value. Otherwise the default language would be the .resx file without country code. (e.g. GlobalRes.resx, instead of GlobalRes.zh-TW.resx)

4. Web.config settings.

<system.web>

<!--Globalization-->
<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true" />
<!--/Globalization-->

<!-- ... -->
<!-- ... -->

</system.web>


5. Route rules (App_start > routeConfig.cs)

routes.MapRoute("Language", "Language/{action}/{id}",
new { controller = "Language", action = "Index", id = UrlParameter.Optional }, new[] { "IrsaWebStore.Controllers" });


6. Modify Views (View > Shared >  _Layout.cshtml as example)

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@Html.Action("PagesMenuPartial", "Pages")
@if (Request.IsAuthenticated)
{
<li><a href="/account/logout">@IrsaWebStore.Resources.GlobalRes.Logout</a></li>
}
else
{
if (ViewBag.Title == "Login")
{
<li class="active"><a href="/account/login">@IrsaWebStore.Resources.GlobalRes.Login</a></li>
}
else
{
<li><a href="/account/login">@IrsaWebStore.Resources.GlobalRes.Login</a></li>
}

if (ViewBag.Title == "CreateAccount")
{
<li class="active"><a href="/account/create-account">@IrsaWebStore.Resources.GlobalRes.Create_Account</a></li>
}
else
{
<li><a href="/account/create-account">@IrsaWebStore.Resources.GlobalRes.Create_Account</a></li>
}
}

<!-- ... -->


於 沒有留言:
標籤： , ,

2018年6月24日 星期日

Adobe Reader: Night mode eye protection Adobe PDF Reader 護眼模式

If you're looking for a night-mode / dark theme for you Adobe Reader, there's no such feature for your document content yet. But you can set the background color to ease your eyes.

 (Adobe Reader 目前沒有文件內的護眼模式 / 夜間模式，所以我們可以透過更改文件背景色來讓閱讀過程更為舒適。)
Steps:

 1. Edit > Preference > Accessibility > Document Colors Options
2. Custom color: Page Background
3. My Color setting:

於 沒有留言:
標籤： ,

2018年6月13日 星期三

Git: Show only changed files in specific commit history 只顯示變更之檔案 不顯示內容

$ git diff-tree --no-commit-id --name-only -r <commit hash>

  • The ---no-commit-id suppresses the commit ID output.
  • The ---pretty argument specifies an empty format string to avoid the cruft at the beginning.
  • The ---name-only argument shows only the file names that were affected (Thanks Hank).
  • The --r argument is to recurse into sub-trees

credit: author
於 沒有留言:
標籤：

2018年6月8日 星期五

Git: Update remote branches to local 更新遠端分支至本地端

git remote prune origin
於 沒有留言:
標籤：

Git: Add or commit all modified without untracked files

Stage only the modified and deleted files.
git add -u

 Commit only the modified and deleted files.
git commit -a
於 沒有留言:
標籤：
訂閱： 意見 (Atom)