# Action
State 的變化,會導致 View 的變化。但是,用戶接觸不到 State,只能接觸到 View。所以,State 的變化必須是 View 導致的。Action 就是 View 發出的通知,表示 State 應該要發生變化了。
## 使用 Action 改變 State
Action 是一個對象。其中的type屬性是必須的,表示 Action 的名稱。其他屬性可以自由設置,社區有一個規范可以參考。
```js
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
```
上面代碼中,Action 的名稱是ADD_TODO,它攜帶的信息是字符串Learn Redux。
可以這樣理解,Action 描述當前發生的事情。改變 State 的唯一辦法,就是使用 Action。它會運送數據到 Store。
使用 dispatch 提交一個 Action
剛才定義了一個 action,可以使用 dispatch 提交之,以下幾種寫法是等價的:
寫法一:
```js
store.dispatch({
type: 'ADD_TODO',
text: 'Learn Redux'
});
```
寫法二:
```js
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
store.dispatch(action)
```
寫法三:
```js
function addTodo (text) {
return {
type: 'ADD_TODO',
payload: text
}
}
store.dispatch(addTodo('Learn Redux'))
```
其中方法三也就是下面要介紹的 Action Creators
- 簡介
- 第一章 React入門
- 1.1 創建一個React項目
- 1.2 組件
- 1.3 JSX
- 1.4 eject
- 1.5 渲染
- 第二章 React組件
- 2.1 組件定義
- 2.2 數據處理
- 2.2.1 props
- 2.2.2 state
- 2.3 生命周期
- 2.3.1 裝載過程
- 2.3.2 更新過程
- 2.3.3 卸載過程
- 2.4 事件處理
- 2.5 條件渲染
- 2.6 列表渲染
- 第三章 React高級
- 3.1 靜態類型檢查
- 3.1.1 flow
- 3.1.2 typescript
- 3.2 React Developer Tools
- 第四章 Redux狀態管理
- 4.1 安裝與配置
- 4.2 一個簡單的計數器開始
- 4.3 Store
- 4.3.1 獲取state
- 4.3.2 subscribe
- 4.4 Action
- 4.4.1 Action Creators
- 4.5 Reducer
- 4.5.1 Reducer 的拆分
- 4.6 與其他狀態管理工具的對比
- 第五章 React-Router路由
- 參考資料