具有Reactredux express的第一印象redux tic tac toe

I had no prior experience with redux, was looking for a chance to get into it a bit more. These scripts (English, Javascript) can help you too or may be you can help me by suggesting my mistakes.

我以前没有关于redux的经验，正在寻找机会进一步使用它。 这些脚本(英语，Javascript)也可以为您提供帮助，或者可以通过提示我的错误来帮助我。

Why you should not read the English script because it is full of non programmer weird examples.

为什么您不应该阅读英语脚本，因为它充满了非程序员怪异的示例。

Why you should read the Javascript:

为什么要阅读Javascript：

=> Understand Redux basics of state management with its middleware for async http request calling

=>了解状态管理的Redux基础知识及其中间件，用于异步http请求调用

=> Single composition of multiple dockers

=>多个docker的单一组成

if you do not like to read English language script than here is the link for story in javascript: https://github.com/mrmanna/react-redux-express-tictactoe

如果您不喜欢阅读英语脚本，那么以下是javascript中故事的链接： https : //github.com/mrmanna/react-redux-express-tictactoe

So if you still want read English scripts, here it is:

因此，如果您仍然想阅读英语脚本，则为：

Do you know these following pains:

您知道以下这些痛苦吗？

1. Async functions callback handling and DOM updating considering multiple states in multiple components at a time.
   异步函数回调处理和DOM更新同时考虑多个组件中的多个状态。
2. Request param and post.body json data mapping and callback json to view bind property mapping
   请求参数和post.body json数据映射以及回调json以查看绑定属性映射

In single page web application there are countless pains as if like last transport after office and everybody is trying to get in.

在单页Web应用程序中，有无数的痛苦，就好像下班后的最后一次运输一样，每个人都试图进入。

When I tried to understand Redux by reading their site and examples, I felt like some guys are trying to address these pains. And this week, I got a recruiter call and he gave me this Redux task and as he saw in my profile no React and no Redux, and I am not interested much in scripting frontend, he was hesitating to give me the task. But I jumped in, mostly for this opportunity to date Redux.

当我尝试通过阅读Redux的站点和示例来了解Redux时，我感到有些人正在尝试解决这些难题。 本周，我接到了招聘人员的电话，他给了我这个Redux任务，正如他在我的个人资料中看到的那样，没有React和Redux，而且我对编写脚本前端不感兴趣，他很犹豫是否要给我任务。 但是我加入进来，主要是因为这个机会可以和Redux约会。

Because in my last large single page project with KnockoutJs, I had to write a framework, so my team of 10+ developers have a single way of handling pre-data, post-data of http async calling and we named its main provider AsyncCallHanlder and for the whole DOM state management I had given another Provider called ApplicationContext (yes I know it is javascript not springboot). But It helped! and my team got aligned and they were happy to have this AsyncCall&CallBackManager and DOMStateStore and we continued 3+ years until we realized this ApplicationContext had become too big with plenty of boot time loading and binding that in Citrix environment with IE9 browser users can not even load the App. So once the blessing is appearing like a curse.

因为在我最后一个使用KnockoutJs的大型单页项目中，我必须编写一个框架， 所以由10个以上的开发人员组成的团队可以用一种方法来处理HTTP异步调用的前置数据，后置数据，因此我们将其主要提供者AsyncCallHanlder和对于整个DOM状态管理，我给了另一个名为ApplicationContext的提供程序 ( 是的，我知道这是JavaScript而不是springboot )。 但这有帮助！ 和我的团队取得了一致，他们很高兴拥有AsyncCall＆CallBackManage r和DOMStateStore ，我们持续了3年多的时间，直到我们意识到ApplicationContext变得太大了，并且具有大量的启动时间加载和绑定，而在Citrix环境下，带有IE9浏览器的用户甚至无法使用加载应用。 因此，一旦祝福像诅咒一样出现。

So the global AsyncCall&CallBackManager was not the problem, the problem was global DOMStateStore. Yes, this is why when I saw Redux manages states with a global store, I just became curious to know how it works. I have no idea how it will perform with its Store for large single page applications. But if you can think frontend modular and not try to put the whole world in single page than I think it is (Redux) is what you should use. (though its is very early for me to comment such )

因此 ，全局AsyncCall＆CallBackManage r不是问题， 而是全局DOMStateStore。 是的，这就是为什么当我看到Redux通过一家全球商店管理州时，我只是好奇地知道它是如何工作的。 我不知道它将如何与大型单页应用程序的Store一起执行。 但是，如果您可以想到前端模块化，而不是尝试将整个世界都放在一个页面中，那么您应该使用(Redux)。 (尽管对我这样评论还为时过早)

So the big story, I am telling here to relate you with the pain, so you can understand where Redux will help you. So lets turn back to our Tic-tac-toe,

因此 ，重要的是，我在这里告诉您与痛苦相关联， 以便您了解Redux将在哪些方面为您提供帮助。 所以，让我们转回到我们的井字tac- 脚趾 ，

if you do not like to read English language script than here is the link for story in javascript: https://github.com/mrmanna/react-redux-express-tictactoe

如果您不喜欢阅读英语脚本，那么以下是javascript中故事的链接： https : //github.com/mrmanna/react-redux-express-tictactoe

State <= Action* < = View, so state change of the application through actions generated from views. So in between View and Application State there are lots of lots of actions.

状态<=操作* <=视图 ， 因此通过视图产生的操作来更改应用程序的状态。 因此 ，在视图和应用程序状态之间有很多动作。

What is Action? Really! I have not thought this question before. But I know Mr. Newton’s first law :

什么是动作 ？ 真！ 我以前从未想过这个问题。 但是我知道牛顿先生的第一定律：

that every object will remain at rest or in uniform motion in a straight line unless compelled to change its state by the action of an external force.

每个对象将在一条直线上保持静止或在匀速运动，除非被迫通过外力的作用来改变其状态。

I do not know what you observed in this law, but I found action is a bogus thing without object 😁

我不知道您在这部法律中所观察到的内容，但我发现行动是虚假的事情，没有任何异议 😁

But in between this action and object, there is a hidden puppet master, yes like Mr. Hitler who did not perform the action killing but commanded the action. Okay, I see someone is not liking the word command, then lets say it like dispatched the action. Okay, now design pattern masters can jump in. Oh! you are talking about command pattern. Yes, I found some people who call it Strategy Pattern. And I was surprised, okay so commanding is strategic! I live in a strange world. This strategic people need middlemen (plural) and they pass it to performers.

但是在这个动作和物体之间，有一个隐藏的木偶大师，就像希特勒先生一样，没有执行该动作 杀死但命令了行动。 好的，我看到有人不喜欢命令一词，然后像派遣动作那样说。 好的，现在设计模式大师可以加入。哦！ 您正在谈论命令模式。 是的，我发现有人称其为“战略模式”。 我很惊讶，好吧，指挥是战略性的！ 我生活在一个陌生的世界。 这个有战略意义的人需要中间人 (复数)，然后将其传递给表演者 。

So the (Action/Dream) planned by=> Strategic People (Containers/View) => dispatches/Commands => Middlemen (Commands) =>Middlemen (Commands) =>Middlemen (Commands) =>Middlemen (Commands) => then some real work happens by workers(Reducers) and => strategic people gets happy or sad (state changes) and they buy a souvenir to make this change memorable (Store) and again they dream… let the drama go on…

所以 计划 的( 行动 /梦想)=>战略人物(容器/ 视图 )=> 调度 / 命令 =>中间人(命令)=>中间人(命令)=>中间人(命令)=>中间人(命令)=>工人( 减速器 ) 发生了一些实际的工作 ，=>战略人物变得高兴或难过( 状态 变化)，他们购买了纪念品以使这种变化令人难忘( Store )，然后他们又梦想着……让戏剧继续下去……

and you can call these middlemen as middlewares 😁. This is Redux.

您可以将这些中间商称为中间件😁。 这是Redux。

if you have lost patience, please read code: https://github.com/mrmanna/react-redux-express-tictactoe

如果您失去了耐心，请阅读代码： https : //github.com/mrmanna/react-redux-express-tictactoe

Okay, lets get serious

好吧，让我们认真一点

Redux Providing

Redux提供

1. State Store
   国营商店
2. Global Action Dispatching control
   全局动作调度控制
3. Application objects and components property mapping with its state through Reducing functions
   通过减少功能将应用程序对象和组件属性映射为其状态

In this application (tic-tac-toe) you can find the whole game state is managed from a top container/view component Tictactoe and decides what actions should go to what component. e.g. the main action of this game is selectingbox (either O or X by a user) and if once the box is selected other can not undo it. On selection we have to check is it a winning move or not. So on this action what are states changes:

在此应用程序(井字游戏)中，您可以找到整个游戏状态是从顶部容器/视图组件Tictactoe管理的，并确定应对哪个组件执行哪些操作。 例如，该游戏的主要动作是选择框(用户选择O或X)，如果选择了该框，其他操作将无法撤消。 选择时，我们必须检查它是否是获胜的举动。 因此，在此操作上，状态发生了什么变化：

• GAME_STATE => RUNNING| DRAW | WON

  GAME_STATE => RUNNING | 抽奖| 韩元

• CURRENT_USER_STATE => FIRST USER (O) | SECOND USER (X)

  CURRENT_USER_STATE => FIRST USER(O)| 第二用户(X)

• WINNER_STATE => FIRST USER (O) | SECOND USER (X) | NONE So what properties can define these states:

  WINNER_STATE => FIRST USER(O)| 第二用户(X)| 那么什么属性可以定义这些状态：

• BOX => {BOX NO, IS_SELECTED, WHO_SELECTED}

  BOX => {BOX NO，IS_SELECTED，WHO_SELECTED}

• SESSION => {CURRENT_USER, GAME_ID, GAME_CURRENT_STATE} That’s all !

  SESSION => {CURRENT_USER，GAME_ID，GAME_CURRENT_STATE}就这些！

Oh! There is always a big challenge for any application that is called — INITIALIZATION — means booting/bootstrapping and we can consider it as another big action called LOAD_GAME. In this application we used a backend memory based API through express server, so if you refresh the browser or get back any time later to play the game you can find it exactly where you left it and it can even handle states of multiple games from multiple browsers.

哦! 对于任何被称为INITIALIZATION的应用程序，始终存在着巨大的挑战，这意味着进行引导/引导，我们可以将其视为另一个名为LOAD_GAME的重大操作。 在此应用程序中，我们通过快递服务器使用了基于后端内存的API， 因此，如果您刷新浏览器或以后任何时间回来玩游戏，您都可以找到它的确切位置，甚至可以处理多个游戏的状态。浏览器。

If you want to enjoy life, reconsider not becoming a programmer 😁, as you will be Reducer 😜 under middlemen who will be under strategist …. Or may be stay patient someday this under under like miners will give you brighter diamonds.

如果你想享受生活，重新考虑不成为一个程序员😁，因为你会减速 😜下中间商谁将会是下战略家......。 或者有朝一日可能会耐心等待，例如矿工会为您提供明亮的钻石。