Question

正如您可以看到Redux源代码的on this line，操作必须具有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符号正确匹配。当它看到一个时，它会停止它，并且不将它传递给减速器。因此，当您删除括号时，您将调度看起来像{"CALL_API" : {} }的操作。这与中间件正在查找的内容不匹配，到达reducers，然后类型检查失败。

没有显式类型属性的操作

1 个答案: