什么是 Redux-choreography
Redux-choreography是一个基于Redux的状态管理库，它的主要目的是解耦业务逻辑和Redux的代码。通过将业务逻辑表示为副作用，Redux-choreography使得业务逻辑可以轻松地组合，并且可以与Redux Store中的状态进行实时交互，从而实现了更加灵活和可扩展的应用程序架构。
安装
在使用Redux-choreography之前，需要先安装依赖，包括Redux、React，可以使用以下命令进行安装：
npm install --save redux react redux-choreography
示例代码
以下是一个基本的Redux-choreography示例代码：
-- -------------------- ---- -------
------ - ---------------------------- - ---- ---------------------
------ - ------------ --------------- - ---- --------
-- ----
----- ------ - -- --
----------------- -------
----- ------ - -- --
----------------- -------
----- ----------- - -- ---- -- -- --
----- ---------------
-------- -
--------
---------- ----
-
---
----- ------------ - -
------------ ---------
------------ ---------
--------------- -------------
--
-- ------- -----
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
------ -------------------- -- ------- --- ----------------- - -------------- - -----
--
--------
------ ------
-
--
----- ------------------------- - -------------------------------------------------------------------------
----- ----- - ---------------------------------------
-- ----
---------------- ----- ----------- ---
---------------- ----- ----------- ---
----- ---- - - --- -- ----- ----- ----- ---------- ----- --
---------------- ----- --------------- -------- - ----- ---- - ---如何使用 Redux-choreography
使用Redux-choreography有以下几个步骤：
1. 定义任务
任务是指需要执行的业务逻辑，由纯函数表示。每个任务都必须返回一个Promise或undefined，Promise可以被resolve或reject，这样就可以在任务完成或出错时执行其他任务。
以下是一个任务定义的示例代码：
-- -------------------- ---- -------
----- ------ - -- --
--- ----------------- ------- -- -
----- ------ - --------------
-- -------- -
----------------
- ---- -
----------------
-
---2. 定义任务对应的Action
Action是指触发任务执行的Redux动作，包括了任务的类型和一些其他的数据，如payload。当Action被触发时，任务将会被执行。
以下是一个Action定义的示例代码：
const doSomething = ({ TASK }) => ({
type: 'DO_SOMETHING',
payload: {
...TASK,
completed: true
}
});3. 定义任务的执行顺序
在Redux-choreography中，任务可以被组合成更大的任务，以便更好地处理复杂业务逻辑。您需要定义这些任务按照何种顺序执行，可以这样做：
const CHOREOGRAPHY = {
'TASK_FIRST': [taskOne, taskTwo],
'TASK_SECOND': [taskThree, taskFour],
'DO_SOMETHING': [doSomething]
};4. 创建Redux Store
创建Redux Store时，必须使用Redux-choreography中提供的中间件(createChoreographyMiddleware)，以便在任务执行时协调Redux Store的状态管理。
const createStoreWithMiddleware = applyMiddleware(createChoreographyMiddleware(CHOREOGRAPHY))(createStore); const store = createStoreWithMiddleware(rootReducer);
5. 触发Redux Action
最后，您可以使用store.dispatch来触发Redux Action，来触发任务的执行：
store.dispatch({ type: 'TASK_FIRST' });
store.dispatch({ type: 'DO_SOMETHING', payload: { TASK: task } });可能的问题和解决方案
在使用Redux-choreography时，可能会遇到以下问题：
1. 相同类型的Action被多次处理
如果您的任务列表中包含相同类型的Action，它们可能会被多次处理，这取决于Redux的“合并更新”策略。要解决此问题，您可以在商业逻辑中引入标志，以便于Redux-choreography可以区分“同类型”Action的不同实例。
2. 顺序执行问题
由于异步任务的执行顺序不同，对于长时间运行的任务，其结果可能会影响后续任务的执行。为了解决由于任务执行顺序错误而引起的问题，您可以在任务列表中引入“优先级”或“条件”属性。
总结
Redux-choreography是一个灵活和可扩展的状态管理库，它能够优雅地解耦业务逻辑和Redux的代码，并且可以轻松地组合业务逻辑。在实际开发中，我们建议将复杂的业务逻辑用Redux-choreography来管理，并在某些情况下使用redux-saga或redux-thunk等其他技术来实现其它功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd381e8991b448e6642