没有显式类型属性的操作答案

【问题标题】：actions without an explicit type property没有显式类型属性的操作
【发布时间】：2016-06-01 14:36:36
【问题描述】：

正如你在 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 函数中的符号，例如，满足对动作的类型属性的要求？

【问题讨论】：

标签： javascript redux redux-thunk

【解决方案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" : {} } 的操作。这与中间件正在寻找的不匹配，它确实到达了 reducer，然后类型检查失败。

【讨论】：