React-Redux介绍

为什么要使用 React-Redux 绑定库?

React 和 Redux 是两个独立的库，两者之间职责独立。因此，为了实现在 React 中使用 Redux 进行状态管理 ，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了。

• 作用：为 React 接入 Redux，实现在 React 中使用 Redux 进行状态管理。
• react-redux 库是 Redux 官方提供的 React 绑定库。

基本使用

react-redux 文档

react-redux 的使用分为两大步：1 全局配置（只需要配置一次） 2 组件接入（获取状态或修改状态）

先看全局配置：

步骤：

1. 安装 react-redux：yarn add react-redux
2. 从 react-redux 中导入 Provider 组件
3. 导入创建好的 redux 仓库
4. 使用 Provider 包裹整个应用
5. 将导入的 store 设置为 Provider 的 store 属性值

核心代码：

src/index.js 中：

// 导入 Provider 组件
import { Provider } from 'react-redux'
// 导入创建好的 store
import store from './store'
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

获取状态useSelector

• useSelector：获取 Redux 提供的状态数据
• 参数：selector 函数，用于从 Redux 状态中筛选出需要的状态数据并返回
• 返回值：筛选出的状态

import { useSelector } from 'react-redux'

// Redux 中的状态是数值，所以，可以直接返回 state 本身
const count = useSelector(state => state)

// 比如，Redux 中的状态是个对象，就可以：
const list = useSelector(state => state.list)

例：

import { useSelector } from 'react-redux'

const App = () => {
  const count = useSelector(state => state)

  return (
      <div>
        <h1>计数器：{count}</h1>
      <button>数值增加</button>
            <button>数值减少</button>
    </div>
  )
}

分发动作useDispatch

• useDispatch：拿到 dispatch 函数，分发 action，修改 redux 中的状态数据

• 语法：

  import { useDispatch } from 'react-redux'
  
  // 调用 useDispatch hook，拿到 dispatch 函数
  const dispatch = useDispatch()
  
  // 调用 dispatch 传入 action，来分发动作
  dispatch( action )
  

例：

import { useDispatch } from 'react-redux'

const App = () => {
  const dispatch = useDispatch()

  return (
      <div>
        <h1>计数器：{count}</h1>
      {/* 调用 dispatch 分发 action */}
      <button onClick={() => dispatch(increment(2))}>数值增加</button>
            <button onClick={() => dispatch(decrement(5))}>数值减少</button>
    </div>
  )
}

理解 Redux 数据流

• 任何一个组件都可以直接接入 Redux，也就是可以直接：1 修改 Redux 状态 2 接收 Redux 状态
• 并且，只要 Redux 中的状态改变了，所有接收该状态的组件都会收到通知，也就是可以获取到最新的 Redux 状态
• 这样的话，两个组件不管隔得多远，都可以直接通讯了

代码结构

在使用 Redux 进行项目开发时，不会将 action/reducer/store 都放在同一个文件中，而是会进行拆分

可以按照以下结构，来组织 Redux 的代码：

/store        --- 在 src 目录中创建，用于存放 Redux 相关的代码
  /actions    --- 存放所有的 action
  /reducers   --- 存放所有的 reducer
  index.js    --- redux 的入口文件，用来创建 store

ActionType的使用

• Action Type 指的是：action 对象中 type 属性的值

• Redux 项目中会多次使用 action type，比如，action 对象、reducer 函数、dispatch(action) 等

• 目标：集中处理 action type，保持项目中 action type 的一致性

• action type 的值采用：'domain/action'(功能/动作)形式，进行分类处理，比如，

  • 计数器：'counter/increment' 表示 Counter 功能中的 increment 动作
  • 登录：'login/getCode' 表示登录获取验证码的动作
  • 个人资料：'profile/get' 表示获取个人资料

步骤：

1. 在 store 目录中创建 actionTypes 目录或者 constants 目录，集中处理
2. 创建常量来存储 action type，并导出
3. 将项目中用到 action type 的地方替换为这些常量，从而保持项目中 action type 的一致性

// actionTypes 或 constants 目录：

const increment = 'counter/increment'
const decrement = 'counter/decrement'

export { increment, decrement }

// --

// 使用：

// actions/index.js
import * as types from '../acitonTypes'
const increment = payload => ({ type: types.increment, payload })
const decrement = payload => ({ type: types.decrement, payload })

// reducers/index.js
import * as types from '../acitonTypes'
const reducer = (state, action) => {
  switch (action.type) {
    case types.increment:
      return state + 1
    case types.decrement:
      return state - action.payload
    default:
      return state
  }
}

注：额外添加 Action Type 会让项目结构变复杂，此操作可省略。但，domain/action 命名方式强烈推荐！

Reducer的分离与合并

• 随着项目功能变得越来越复杂，需要 Redux 管理的状态也会越来越多

• 此时，有两种方式来处理状态的更新：

  1. 使用一个 reducer：处理项目中所有状态的更新
  2. 使用多个 reducer：按照项目功能划分，每个功能使用一个 reducer 来处理该功能的状态更新

• 推荐：使用多个 reducer（第二种方案），每个 reducer 处理的状态更单一，职责更明确

• 此时，项目中会有多个 reducer，但是 store 只能接收一个 reducer，因此，需要将多个 reducer 合并为一根 reducer，才能传递给 store

• 合并方式：使用 Redux 中的 combineReducers 函数

• 注意：

  合并后，Redux 的状态会变为一个对象，对象的结构与 combineReducers 函数的参数结构相同

  • 比如，此时 Redux 状态为：{ a： aReducer 处理的状态, b： bReducer 处理的状态 }

import { combineReducers } from 'redux'

// 计数器案例，状态默认值为：0
const aReducer = (state = 0, action) => {}
// Todos 案例，状态默认值为：[]
const bReducer = (state = [], action) => {}

// 合并多个 reducer 为一个 根reducer
const rootReducer = combineReducers({
  a: aReducer,
  b: bReducer
})

// 创建 store 时，传入 根reducer
const store = createStore(rootReducer)

// 此时，合并后的 redux 状态： { a: 0, b: [] }

• 注意：虽然在使用combineReducers以后，整个 Redux 应用的状态变为了对象，但是，对于每个 reducer 来说，每个 reducer 只负责整个状态中的某一个值

  • 也就是：每个reducer只负责自己要处理的状态
• 举例：
  • 登录功能：loginReducer 处理的状态只应该是跟登录相关的状态
    • 个人资料：profileReducer 处理的状态只应该是跟个人资料相关的状态
• 合并 reducer 后，redux 处理方式：只要合并了 reducer，不管分发什么 action，所有的 reducer 都会执行一次。各个 reducer 在执行的时候，能处理这个 action 就处理，处理不了就直接返回上一次的状态。所以，我们分发的某一个 action 就只能被某一个 reducer 来处理，也就是最终只会修改这个 reducer 要处理的状态，最终的表现就是：分发了 action，只修改了 redux 中这个 action 对应的状态！

redux管理哪些状态

不同状态的处理方式：

1. 将所有的状态全部放到 redux 中，由 redux 管理
2. 只将某些状态数据放在 redux 中，其他数据可以放在组件中，比如：
   • 如果一个状态，只在某个组件中使用（比如，表单项的值），推荐：放在组件中
   • 需要放到 redux 中的状态：
     1. 在多个组件中都要使用的数据【涉及组件通讯】
     2. 通过 ajax 请求获取到的接口数据【涉及到请求相关逻辑代码放在哪的问题】