React笔记（八）Redux

一、安装和配置

React 官方并没有提供对应的状态机插件，因此，我们需要下载第三方的状态机插件 —— Redux。

1、下载Redux

在终端中定位到项目根目录，然后执行以下命令下载 Redux

npm i redux

2、创建配置文件

在 React 中，不会自动生成状态机的相关配置代码，因此，需要我们自己手动去创建目录以及配置文件。

我们可以在 src 的目录中创建一个 redux 或 store 的目录，用来存放所有关于状态机的配置文件。然后，在该目录中创建一个 store.js 文件，作为整个状态机的入口文件。

3、配置状态机

3.1、创建store仓库对象

import {legacy_createStore as createStore} from 'redux'
const store=createStore();

3.2、保存数据到store中

createStore 方法接收一个函数作为参数，该函数的返回值，会保存到 store 仓库中

const store = createStore((state = 数据初始值) => {
    return state;
});

通过函数参数的默认值的方式，来设置仓库数据的初始值

3.3、查看仓库数据

在 store 仓库对象身上，提供了一个 getState() 方法，用来查看仓库中的所有数据：

console.log(store.getState());

由于目前没有任何文件中在引入状态机的配置文件，如果我们需要查看仓库中的数据，暂时需要在 index.js 中引入 /redux/store.js 文件来让其运行。

二、Redux核心概念

1、Redux工作流程

2、Redux组成部分

2.1、state

state:状态，就是我们传递的数据

2.2、action

action是一个通知对象，里面必须有一个type属性，表示当前通知的类型，至于其他属性，你可以任意添加

可以通过store.dispatch(action对象)来更新仓库中的数据

注意：

• 在实际开发中，更多人喜欢用action创建函数

• 在实际开发中，大多数情况下，type会被定义成字符串常量

2.3、reducer

reducer本质是一个函数，它用来响应发送过来的actions,经过处理把state发送给store

• 在reducer函数中，需要return返回值，这样store才能接收到数据

• reducer函数接收两个参数，第一个参数是初始化store,第二个参数是action

2.4、store

数据仓库，存放组件数据的地方。一个项目一般只有一个数据仓库,store可以把action和reducer联系在一起。

主要的职责

• 维护应用的state

• 提供getState()方法获取state

• 提供dispatch()方法发送action

• 通过subscribe()来注册监听

• 通过subscribe()返回值来注销监听

三、第一个Redux程序

1、创建action

• 在src目录下创建一个actions文件夹

• 在该目录下创建一个index.js文件

• action是一个通知对象，里面必须有一个type属性，这里的num属性是自定义的表示计数器每次增加的个数

const incrementAction={
    type:'increment',
    num:1
}
export {incrementAction}

2、创建reducer

• 在src目录下创建reducers目录

• 在该目录下创建index.js文件，用来构建reducer，注意reducer要接收两个参数

• 第一个参数是默认状态，我们可以定义一个初始化的state，然后进行赋值

• 在函数里面判断第二个参数action的type值是否是我们发送过的,如果是，我们可以通过return返回新的state

const counterReducer=(state=0,action)=>{
   switch(action.type){
        case 'increment':
            return state+action.num
        default:
            return state
    }
}
export {counterReducer}

3、创建store

• 在src目录下创建一个文件夹store

• 在该目录下创建index.js文件，用来构建store,注意createStore函数第一个参数接收的是reducer

import {legacy_createStore as createStore} from 'redux'
import {counterReducer} from '../reducers'
const store=createStore(counterReducer)
export default store

4、在组件中使用

• 创建components文件夹，该目录下存放自定义组件

• 在该目录下新建Counter.jsx文件

• 将Counter.jsx引入到App.js文件中

import Counter from "./components/Counter";
function App() {
  return (
    <div>
        <Counter></Counter>
    </div>
  );
}
export default App;

• 调用dispatch函数,更新仓库的数据

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const increment=()=>{
      store.dispatch(incrementAction)
  }
  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

• 当组件加载完毕后，调用 store. subscribe注册监听，监听state数据的变化

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment=()=>{
      store.dispatch(incrementAction)
  }
  useEffect(()=>{
    store.subscribe(()=>{

        console.log('正在监控'+store.getState());
        setCount({})
    })
  })

  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

四、redux中action和reducer的优化

1、action优化

1.1、action creator

我们一般会在页面里面修改数据，即，在页面里面调用store的dispatch方法。那就意味着action对象中的num字段很大可能是动态的，即不同的页面num字段可能是不同的，这样我们就不能把action写成一个死的对象，最好是封装成一个函数，执行过后返回一个action通知对象，然后num的值通过函数的参数来决定。这样的函数我们称之为action创建函数（action creator）

const incrementAction=(num)=>{
    return{
        type:'increment',
        num:num
    }
}
export {incrementAction}

1.2、type常量

在实际开发中，type在多数情况下会被定义成常量，如下所示

• 在src/actions目录下，新建actionTypes.jsx文件，将所有type类型定义成常量

export const INCREMENT ="increment"

• 在action creator中引入

import {INCREMENT} from './constant'
const incrementAction=(num)=>{
    return{
        type:INCREMENT,
        num:num
    }
}
export {incrementAction}

2、reducer优化

项目中肯定不止一个数据，所以state的默认值应该是一个对象，而不是其他。而且除了默认值，每当case到一个条件，返回一个新的对象时，应该返回一个全新的对象，然后才是你要修改的数据（当然这些数据，如果是引用类型的话，应该修改其引用本身，否则界面可能不会更新，尽管数据发生变化了

import { INCREMENT } from '../actions/constant'
const counterReducer = (state = { num: 0 }, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                ...state,
                num: state.num + action.num
            }
        default:
            return state
    }
}
export { counterReducer }

优化后，在组件中调用的代码如下

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment=()=>{
      store.dispatch(incrementAction(2))
  }
  useEffect(()=>{
    store.subscribe(()=>{

        console.log('正在监控'+store.getState());
        setCount({})
    })
  })

  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

五、react-redux概述

为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

1、UI组件

UI 组件有以下几个特征。

• 只负责 UI 的呈现，不带有任何业务逻辑

• 没有状态（即不使用this.state这个变量）

• 所有数据都由参数（this.props）提供

• 不使用任何 Redux 的 API

2、容器组件

容器组件有以下几个特征。

• 负责管理数据和业务逻辑，不负责 UI 的呈现

• 带有内部状态

• 使用 Redux 的 API

总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

六、react-redux基本使用

1、安装react-redux

npm i react-redux
npm i redux

2、创建action

• 在constant.jsx中添加INCREMENT

export const INCREMENT="increment";

• 在src/actions/index.jsx中添加incrementAction

import { INCREMENT } from "./constant";
export const incrementAction=num=>({type:INCREMENT,num})

3、创建reducer

• 在src/reducers/index.jsx中添加counterReducer

import {INCREMENT} from '../actions/constant'
const counterReducer=(state={num:0},action)=>{
    switch(action.type){
        case INCREMENT:
            return{
                ...state,
                num:state.num+action.num
            }
        default:
            return state
    }
}
export {counterReducer}

4、创建store

在src/store/index.jsx中编写代码如下

import {legacy_createStore as createStore} from 'redux'
import {counterReducer} from '../reducers'
const store=createStore(counterReducer)
export default store

5、全局注入store仓库

• 在index.js中导入Provider组件

import {Provider} from 'react-redux'

• 利用provider组件将整个接口进行包裹

• 给Provider组件设置store的属性，该属性的值就是通过createStore构建出来的store实例对象

import ReactDOM from 'react-dom/client'
import App from './App';
import {Provider} from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

• Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

6、组件关联仓库

由于UI组件不能使用Redux的API所以，如果在组件中如果要使用Redux就必须将UI组件变成容器类组件

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来

import React from 'react'
import { connect } from 'react-redux'

function Counter() {
  render() {
    return (
      <div>
          
      </div>
    )
  }
}
export default connect()(Counter)

7、组件操作仓库

7.1、获取仓库数据

connect 方法接收一个回调函数作为参数：

const mapStateToProps = () => {

}
export default connect(mapStateToProps)(Counter);

该回调函数本身，又可以通过第一个参数接收到仓库中的所有数据

const mapStateToProps = (state) => {
    console.log(state); // 仓库中所有的数据
}
export default connect(mapStateToProps)(Counter);

在该回调函数中，返回一个对象，该对象会和组件的 props 进行合并。换句话说，该函数的返回值会添加到组件的 props 中：

const mapStateToProps = (state) => {
    return {
        数据名: 从 state 中获取的数据值
    }
}
export default connect(mapStateToProps)(Counter);

处理完成后，我们就可以在组件的 props 中访问到对应的仓库数据了：

function Counter(props)
    render() {
        return (
            <div>
                <h1>计数器</h1>
                <h2>{props.数据名}</h2>
            </div>
        )
    }
}

7.2、修改仓库数据

修改仓库数据，依然是通过 dispatch() 方法来触发修改操作。

在组件中，只要和仓库关联过，就能在 props 上直接获取到 dispatch 方法。因此，在组件中可以直接通过 props.dispatch() 方法来触发修改数据的操作。

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'
import { connect } from 'react-redux';

function Counter(props) {
  const increment=()=>{
      props.dispatch(incrementAction(3))
  }
  return (
    <div>
        <h1>计数器:{props.num}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}
const mapStateToProps = (state) => {
    console.log(state); // 仓库中所有的数据
    return{
       num:state.num
    }
}
export default connect(mapStateToProps)(Counter)

七、状态机的Hook

针对 React 中的函数组件，React-Redux 中也提供了第三方的 Hook。

1、useSelector

通过调用 useSelector 方法，并传递一个回调函数作为参数，我们可以在这个回调函数中获取到仓库中的 state。

import { useSelector } from 'react-redux'
useSelector((state) => {
    console.log(state);  // 仓库中所有的数据
})

然后我们可以在回调函数中，将我们需要使用的数据 return 出来，然后用一个变量来接收：

const data = useSelector((state) => {
    return 数据;
})

后续组件要使用数据，就可以直接通过变量进行数据的访问了。

2、useDispatch

调用 useDispatch() 方法，可以直接获取到 dispatch() 方法。

import { useDispatch } from 'react-redux'
export default fucntion Test() {
    const dispatch = useDispatch();
    return (
    )
}

如果组件中使用 Hook 来获取 dispatch 方法的话，就不再需要使用 connect 来对组件和仓库进行关联了。

获取到 dispatch 方法后，后续的使用就和 props.dispatch 的使用一致。

关键代码

import React from 'react'
import {useDispatch,useSelector} from 'react-redux'
import {incrementAction} from '../../redux/action'


export default function Counter(props) {
  const num=useSelector((state)=>{
    return state.num
  })
  const dispatch=useDispatch()
  const increment=()=>{
    dispatch(incrementAction(3))
  }
  return (
    <div>
        <h1>计数器:{num}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

八、reducer拆分

当项目越来越大的时候，需要管理的数据也会越来越多，如果所有的数据都由一个reducer管理的话，则这个reducer肯定会变得非常的臃肿，且难以维护。所以有必要对reducer做一个拆分，不同功能模块的数据切片，由不同的reducer来管理。假设现在有两个模块，账户管理模块和商品管理模块，每个模块都有数据需要管理

import {combineReducers} from 'redux'
import counterReducer from './counterReducer'
export default combineReducers({
    counter:counterReducer
})

注意：调用时候需要使用使用到切片的名字才能访问到，比如

import React from 'react'
import {useSelector} from 'react-redux'
export default function Counter(props) {
  const count=useSelector((state)=>{
    console.log(state);
    return state.counter.num      //state.切片名的key.num
  })
  return (
    <div>
        <h1>计数器:{count}</h1>
    </div>
  )
}