2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
id: 5a24c314108439a4d403614d
|
|
|
|
|
title: Define a Redux Action
|
|
|
|
|
challengeType: 6
|
|
|
|
|
isRequired: false
|
2020-09-07 16:16:17 +08:00
|
|
|
|
forumTopicId: 301440
|
|
|
|
|
localeTitle: 定义一个 Redux Action
|
2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Description
|
2020-09-07 16:16:17 +08:00
|
|
|
|
<section id='description'>
|
|
|
|
|
由于 Redux 是一个状态管理框架,因此更新状态是其核心任务之一。在 Redux 中,所有状态更新都由 dispatch action 触发,action 只是一个 JavaScript 对象,其中包含有关已发生的 action 事件的信息。Redux store 接收这些 action 对象,然后更新相应的状态。有时,Redux action 也会携带一些数据。例如,在用户登录后携带用户名,虽然数据是可选的,但 action 必须带有<code>type</code>属性,该属性表示此 action 的类型。
|
|
|
|
|
我们可以将 Redux action 视为信使,将有关应用程序中发生的事件信息提供给 Redux store,然后 store 根据发生的 action 进行状态的更新。
|
|
|
|
|
</section>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
## Instructions
|
2020-09-07 16:16:17 +08:00
|
|
|
|
<section id='instructions'>
|
|
|
|
|
编写 Redux action 就像声明具有 type 属性的对象一样简单,声明一个对象<code>action</code>并为它设置一个属性<code>type</code>,并将他的值设置成字符串<code>'LOGIN'</code>。
|
|
|
|
|
</section>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
|
<section id='tests'>
|
|
|
|
|
|
|
|
|
|
```yml
|
|
|
|
|
tests:
|
2020-09-07 16:16:17 +08:00
|
|
|
|
- text: 应该有一个 action 对象。
|
2020-02-18 01:40:55 +09:00
|
|
|
|
testString: assert((function() { return typeof action === 'object' })());
|
2020-09-07 16:16:17 +08:00
|
|
|
|
- text: 该 action 的值应该为<code>LOGIN</code>。
|
2020-02-18 01:40:55 +09:00
|
|
|
|
testString: assert((function() { return action.type === 'LOGIN' })());
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
## Challenge Seed
|
|
|
|
|
<section id='challengeSeed'>
|
|
|
|
|
|
|
|
|
|
<div id='jsx-seed'>
|
|
|
|
|
|
|
|
|
|
```jsx
|
2020-09-07 16:16:17 +08:00
|
|
|
|
// 在此处定义 action
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
## Solution
|
|
|
|
|
<section id='solution'>
|
|
|
|
|
|
2020-09-07 16:16:17 +08:00
|
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```js
|
2020-09-07 16:16:17 +08:00
|
|
|
|
const action = {
|
|
|
|
|
type: 'LOGIN'
|
|
|
|
|
}
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
2020-08-13 17:24:35 +02:00
|
|
|
|
|
2020-09-07 16:16:17 +08:00
|
|
|
|
</section>
|