javascript - 没有显式类型属性的操作

Question

如你所见on this line在 Redux 源代码中，操作必须具有 type 属性。在real world在源代码存储库中的示例中，有一个这样的操作，没有声明 type 属性。

function fetchUser(login) { 
10   return { 
11     [CALL_API]: { 
12       types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ], 
13       endpoint: `users/${login}`, 
14       schema: Schemas.USER 
15     } 
16   } 
17 } 

CALL_API 是一个 JavaScript 符号 here

export const CALL_API = Symbol('Call API')

在旁注中，从 Mozilla 站点，您似乎访问了带有数组括号的符号

var sym = Symbol("foo");
var obj = {[sym]: 1};

因此，回到 redux 代码，处理没有显式类型的操作的中间件似乎访问由 CALL_API 创建的属性...

export default store => next => action => { 
84   const callAPI = action[CALL_API] 
85   if (typeof callAPI === 'undefined') { 
86     return next(action) 
87   }  function fetchUser(login) { 
10   return { 
11     [CALL_API]: { 
12       types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ], 
13       endpoint: `users/${login}`, 
14       schema: Schemas.USER 
15     } 
16   } 
17 } 

回到上面引用的第一个代码，如果我像这样从调用 api 周围移除数组括号

 function fetchUser(login) { 
    10   return { 
    11     CALL_API: { 

我收到错误消息，“操作可能没有未定义的“类型”属性”。

问题:例如，在 fetchUser 函数中(正确)使用符号如何满足操作类型属性的要求？

Answer 1

在对象字面量中使用方括号是较新的 ES6 语法的一部分。它允许您使用表达式在对象中定义键，其中可以包含变量的值:

const keyName = "test";
const obj = { [keyName + "Key"] : 42};
// result: { "testKey" : 42}

符号也可以用作对象键(参见 http://blog.keithcirkel.co.uk/metaprogramming-in-es6-symbols/ )以获得一些解释。

当您将 [CALL_API] 括起来时，您是在说“使用 CALL_API 变量的值作为键” .当您不使用方括号时，您就是在说“使用文字字符串 "CALL_API" 作为键名”。

然后中间件正在寻找一个操作对象，该对象具有与 CALL_API 符号正确匹配的键。当它看到一个时，它会停止它，并且不会将它传递给 reducer 。因此，当您删除括号时，您实际上是在分派(dispatch)一个类似于 {"CALL_API": {} } 的操作。这与中间件正在寻找的内容不匹配，它确实到达了 reducers，然后类型检查失败。