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>
  )
}