在前端开发中，React 算是目前很流行的一种前端框架。而 Redux 又是个优秀的状态管理工具。如果你在开发 React 应用的时候也使用了 Redux 进行状态管理，那么你可能会想到，使用 React 和 Redux 开发井字棋游戏（Tic-Tac-Toe）必然需要相当数量的代码。但我们有一个救星：利用了 React 和 Redux 开发井字棋游戏的一个开源大佬编写的 npm 包 react-redux-transition-tic-tac-toe npm 包。
这个 npm 包内置了一整套井字棋游戏的逻辑，包含游戏的所有状态的描述，并且用 React 的方式来渲染。通过这个 npm 包，你能轻松地使用这套逻辑和 UI 实现自己的井字棋游戏而不用写大量的样板代码。在这篇文章中，我们将会学习如何使用 react-redux-transition-tic-tac-toe npm 包来实现自己的井字棋游戏。
安装
这个 npm 包是一个用 React 和 Redux 实现的井字棋游戏，所以它需要这两个包的依赖。下面是如何使用 npm 安装它：
npm install --save react-redux-transition-tic-tac-toe react redux
使用
接下来，我们将开始使用这个 npm 包来实现我们的井字棋游戏。我们需要创建一个 React 组件来管理游戏的状态，并且以 React 组件的方式使用 tic-tac-toe 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - --------- - ---- -------------------------------------
----- ------- - ------ - --- -- ------
----- ----- - ---------------------
----- ------------- - -- -- -
------ -
--------- --------------
---------- --
-----------
--
--
------ ------- --------------使用这个组件，你将获得一个预制的井字棋游戏，并且通过它，用户能够操作游戏（下棋）。这个组件内置了一个状态管理工具，支持以下功能：
- 最后一个下棋点的动画
- 下棋提示
- 游戏结果展示
- 用户交互反馈
如果没有这个包，你需要自己实现这些功能。
添加动画
tic-tac-toe 组件同时也内置了动画。默认的过渡效果是一个简单的动画。如果你需要改变动画，你可以做如下改动：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - --------- - ---- -------------------------------------
----- ------- - ------ - --- -- ------
----- ----- - ---------------------
----- ------------- - -- -- -
----- ----- - --------- -------- ------ -- -
-------------------- -------- -------
------ - -- -- -- -- -------- --- --
--
------ -
--------- --------------
---------- ------------- --
-----------
--
--
------ ------- --------------我们可以使用 slide 方法作为过渡效果，来改变默认的效果。slide 函数将前一个位置（prevPos）、下一个位置（nextPos）和动画是否需要重启（reset）作为函数的参数，调用要求返回一个 CSS 属性对象。
总结
在这篇文章中，我们学习了如何使用 react-redux-transition-tic-tac-toe npm 包来快速地实现井字棋游戏。通过使用这个包，我们省去了很多实现的代码和复杂的业务逻辑。同时包也内置了动画系统，我们可以轻松地进行定制。现在，你已经知道如何使用这个包，开始自己的开发吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5d81e8991b448e5e7a