Redux api全整理

redux

描述

Redux 是JavaScript的一個可預言的狀態管理器

三個原則

• 單一數據源
• 狀態只讀
• 更新必須由純函數完成（不能直接修改狀態）

Redux Top-Level Api

createStore()

創建一個 Redux store 用來存儲所有的state 應用中應有且只有一個store

combineReducers()

合並多個不同reducer 函數作為value的對象，合並為最終的reducer函數

applyMiddleware()

使用包含自定義功能的middleware 來拓展Redux

bindActionCreators()不常用

把一個 value 為不同 action creator 的對象，轉成擁有同名 key 的對象。同時使用 dispatch 對每個 action creator 進行包裝，以便可以直接調用它們。

一般情況下你可以直接在 Store 實例上調用 dispatch。如果你在 React 中使用 Redux，react-redux 會提供 dispatch 函數讓你直接調用它

compose()不常用

從右到左來組合多個函數。

這是函數式編程中的方法，為了方便，被放到了 Redux 里。 當需要把多個 store 增強器 依次執行的時候，需要用到它。

Store Api

getState()

返回當前的 redux 狀態樹

dispath(action)

觸發狀態更改的唯一方法，將當前state和dispatch 進行同步調用其返回值作為下一個state。

subscribe(listener)

注冊一個監聽（訂閱），當dispatch() 觸發時會調用它

replceReducer(nextReducer) 不常用

動態添加/修改 reducer到store

redux-toolkit

描述

redux的開發工具包，為了解決Redux 的三個常見問題

• 簡化Redux store配置
• Redux 需要很多包才能提供更強大的功能
• Redux 需要太多的樣板代碼

redux toolkit Apis

configureStore()

重新封裝了redux的createStore()

createReducer()

用於代替redux reducer方法，簡化操作類型（以前需要寫switch case）.並且引入了immer庫，使得在reducer中可以直接修改state值，不需要返回新對象state.todos[3].completed = true

createAction()

一個action 生成器，可以自動創建action方法，無需使用樣式模板。

// 不使用createAction
const INCREMENT = 'counter/increment'
​
function increment(amount) {
  return {
    type: INCREMENT,
    payload: amount
  }
}
​
const action = increment(3)
// { type: 'counter/increment', payload: 3 }

 

 

 

 

 

// 使用 createAction
const increment = createAction('counter/increment')
​
let action = increment()
// { type: 'counter/increment' }
​
action = increment(3)
// returns { type: 'counter/increment', payload: 3 }
​
console.log(increment.toString())
// 'counter/increment'
​
console.log(`The action type is: ${increment}`)
// 'The action type is: counter/increment'

 

 

 

 

createSlice() 核心功能

詳細請參考：createSlice 文檔

接收一個對象，包括reducer函數，切片名，初始化狀態。並自動生成 Action creators和Action type

createAsyncThunk()

接收一個 action type 和一個返回promise的函數，實現異步操作

createSelector() 類似computed

生成一組可重用的簡化器和選擇器，以管理存儲中的規范化數據

 

react-redux

描述

react-redux 是react 捆綁redux 的官方包。

它允許 React 組件從 Redux 存儲讀取數據，並dispatch(action)到存儲以更新數據

react-redux Api

connect()核心功能

connect將react組件與redux狀態存儲器連接起來

provider() 核心

使用connect() 必須先使用provider 包裹（需要connect）組件。

一般在app的頂層使用，這樣整個應用的組件都在其中

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
​
import { App } from './App'
import createStore from './createReduxStore'
​
const store = createStore()
​
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

 

 

 

 

connectAdvanced()不常用

將react組件與redux狀態存儲器連接起來

batch()

在js單個事件循環中，統一處理多個function

import { batch } from 'react-redux'
​
function myThunk() {
  return (dispatch, getState) => {
    // should only result in one combined re-render, not two
    batch(() => {
      dispatch(increment())
      dispatch(increment())
    })
  }
}

 

 

 

HooksReact^16.8

React 16.8+ 的新hooksApi 給予了數組件使用local狀態的能力，以此為基礎，我們不需要在寫class組件，來使用redux-state！（可以不使用connect）

useSelector()

在函數組件中獲取store的當前狀態

import React from 'react'
import { useSelector } from 'react-redux'
​
export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

 

useDispatch()

在函數組件中獲取 dispatch 函數的引用

import React from 'react'
import { useDispatch } from 'react-redux'
​
export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()
​
  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}