没有明确类型的操作属性

Question

正如您在源代码存储库中看到的 on this line of the Redux source code, actions must have a type property. In the 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: {

我收到错误，"Actions may not have an undefined "键入“属性”。

问题：例如，在 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] 放在方括号中时，您表示的是 "use the value of the CALL_API variable as the key"。当你不使用方括号时，你说的是 "Use the literal string "CALL_API" as the key name".

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

没有明确类型的操作属性

actions without an explicit type property

javascript

redux

redux-thunk

没有明确类型的操作 属性

actions without an explicit type property

javascript

redux

redux-thunk

没有明确类型的操作属性