[toc]
### 引入store
```
import {createStore, applyMiddleware} from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk' // 引入后 action 可以 return 一個方法,否則只能是對象
import { createLogger } from 'redux-logger' // 查看 store
const store = createStore(
reducer,
applyMiddleware(thunk, createLogger()),
); // 創建數據倉庫
store.getState() // 獲取 state 值
store.dispatch(action) // 直接dispatch action
export default store;
```
### action
action的兩種寫法,引入中間件 thunk前,返回一個對象, store.dispatch(action)
```
export const getInputChangeAction = (value) => ({
type: CHANGE_INPUT_VALUE,
value
})
const action = getInputChangeAction(e.target.value)
store.dispatch(action)
```
引入 thunk 后,可以返回一個方法,thunk相當于給 dispatch 做了升級
```
const action = getTodoList()
store.dispatch(action) // 直接執行,action 中的方法,其中方法中默認有一個dispatch,用來傳遞給 action
export const getTodoList = () => {
return (dispatch) => {
axios.get('http://127.0.0.1:3001/test').then(res => {
const action = initListAction(res.data)
dispatch(action)
})
}
}
export const initListAction = (data) => ({
type: INIT_LIST_ACTION,
data
})
```
### reducer
```
if (action.type === ADD_TODO_ITEM) {
const newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = '';
return newState
}
```
- 第一章:react 基礎
- 1. 關于 react
- 2. react 工作原理
- 0. 開發環境搭建
- 1. 創建并使用一個組件
- 1. 模塊化與組件化
- 2. 虛擬DOM
- 3. Diff 算法
- React 與 Vue 的使用差異
- 1. 組件創建方式
- 2. data 與 state
- 3. 方法使用方式&this
- 4. 數據雙向綁定
- 5. props
- 6. ref
- 7. for 循環元素
- 8. 生命周期
- create-react-app 改為多頁面應用
- react修改打包路徑,直接查看
- redux
- context
- lazy 實現延遲加載靜態屬性
- Memo實現指定組件進行渲染
- React Hooks
- React Hooks 的概念和意義
- 使用 useState
- axios單次切換formdata和payreload
- react 動態綁定 class
- 高階組件
- react設計模式