devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react笔记_11 redux_react 存储数据到redux

作者：2023面试高手 | 2024-04-30 01:23:24

赞

踩

react 存储数据到redux

目录

redux

redux中文文档

定义

Redux 是 JavaScript 状态容器，提供可预测化的状态管理 --> 是一个专门做状态管理的js库。
redux并不是react的插件库 --> Redux 除了和 React 一起用外，还支持其它界面库(如angular, vue 等)。 它体小精悍（只有2KB–包括依赖）。

使用时机

  • 不需要使用时

    • 如果你不知道是否需要 Redux，那就是不需要它

    • 只有遇到 React 实在解决不了的问题，你才需要 Redux

    • 简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
  • 需要使用时
    • 若是组件间状态比较复杂，可以使用redux.
      • 比如：某个组件的状态，需要共享
      • 比如：某个状态需要在任何地方都可以拿到
      • 比如： 一个组件需要改变全局状态
      • 比如：一个组件需要改变另一个组件的状态

redux基本概念

Store

Redux为单一数据源。

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

将state、action、reducer 关联在一起；

State

在 Redux API 中，State指一个唯一的 state 值

  • state 就是Redux 应用的全部状态 即 Redux管理的全部数据，通常为一个多层嵌套的对象。
  • state 由 store 管理
  • 当想要获取state数据时 通过API -> getState 获取。
Action

Action 是一个普通对象，用来表示即将改变 state 的意图。

State 是只读的,唯一改变 state 的方法就是触发 action。它是将数据放入 store 的唯一途径。

约定俗成，action 必须拥有一个 type属性，表示动作类型，其他属性由自己决定。

reducer

Reducer 的作用是用于描述action 如何改变 state tree。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state

可用于初始化状态、加工状态；

redux工作原理

在这里插入图片描述
从原理图来看 compoents 、Action Creators、 Reducers、Stroe -> 表示组件、action 、reducer都是存在多个，而Stroe是唯一的。

若是仅存在一个组件，根本不需要使用redux，只需要使用组件内部状态管理就可以实现功能。
所以现在假设存在多个组件，组件的数据使用 redux 统一管理。当某个组件想要修改数据时

  • [1] 组件想要修改数据 -> 告诉 Action创建者
  • [2] Action 创建者去创建一个Action动作对象(里面包含干什么、如何干)
  • [3] 通过 dispatch函数将 Action动作对象 派发出去
  • [4] Store(调度者) 接收到action，将action和preState(原来的值)交给 reducer
  • [5] reducer 进行计算 并将计算得到的值 交给 Store
  • [6] 组件想要获取数据时 再通过 getState方法 获取更新后的值

举一个最简单的例子

  • component:客人
  • Action Creators : 服务员
  • dispatch: 点菜宝
  • Store: 老板
  • reducer：厨师

语法

[1] 创建Store
createStore
combineReducers

Store 是通过 createStore 方法创建的

  • (1) 引入createStore
    import { createStore } from 'redux'

    • 1
  • (2) 创建Store
    createStore( reducer )

    • 1
    • 若是仅仅存在一个reducer,我们可以直接引入(值为一个函数)
      import { createStore } from 'redux'
import numReducer from './numReducer'
const store =  createStore( numReducer )

      • 1
      • 2
      • 3
      此时若是获取state, 得到的值就是 该reducer返回的值，比如numReducer返回值为0，此时通过getState得到的值就是0。
    • 若是存在多个reducer, 就需要通过 combineReducers方法进行reducer合并
      import { createStore, combineReducers } from 'redux'
import numReduce from './numReduce'
import countReduce from './countReduce'
const reduces = {
  num:numReduce,
  count:countReduce
}
const store =  createStore( combineReducers(reduces) )

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      此时若是获取state, 得到的值就是 一个对象
      {
  num:numReduce函数的返回值，
  count:countReduce函数的返回值
}

      • 1
      • 2
      • 3
      • 4
[2]创建并分发action
dispatch
applyMiddleware

使用Action Creator 去创建Action，使用dispatch去派发action。

语法

action的值可以是一个对象，也可以是一个函数

  • 若是值为一个对象 表示是同步更新数据
      {
    type: 动作指令(String类型)，
    data:  操作数据
  }

    • 1
    • 2
    • 3
    • 4
  • 若是值为一个函数 表示是异步更新数据
    // 该方法默认会将dispatch作为函数传入
(dispatch)=>{
  setTimeOut(()=>{
    dispatch({type:动作指令，data:  操作数据})
  },0) // 使用定时器模拟异步操作
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
举例说明- 做一个加法运算
  • 同步加法
    • action
      export const addAction = data => ({type:INCREMENT,data})

      • 1
    • 在组件中派发此action
      import {addAction} from '../../../store/action.js
import store from '../../../store'
// 派发
store.dispatch(addAction( value ))'

      • 1
      • 2
      • 3
      • 4
  • 异步加法
    • action
      export const addActionAsync = (data, time) =>{
  return (dispatch)=>{
    setTimeout(()=>{
      dispatch({type:'add',data})
    },time)
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
    • 在组件中派发action
       import {addActionAsync} from '../../../store/action.js
 import store from '../../../store'
 // 派发
 store.dispatch(addActionAsync( value ))'

      • 1
      • 2
      • 3
      • 4
执行原理

当使用dispatch去派发action时，在Store会接收到-> Stroe会去查看action的类型

  • 若是类型为一个对象 -> Store会将action交给 reducer

  • 若是类型为一个函数 -> 会报错
    在这里插入图片描述
    希望得到的值为一个对象。
    若是希望action能够兼容值为函数的情况(也就是能够使用异步Action),需要使用一个中间件 redux-thunk

  • 使用redux-thunk中间件后，若是类型为一个函数 -> store会调用该函数并将dispatch 方法作为参数传入(而不会交给reducer)

redux-thunk中间件使用
  • 作用：可以让sotre识别 函数类型的action
  • 使用
    • [1] 下载
      使用命令npm i redux-thunk 下载
    • [2] 配置
      因为我们的目的是想让Stroe能够识别 函数类型的action，所以在store创建过程进行配置 -> 使用applyMiddleware配置中间件
      import { createStore, applyMiddleware } from 'redux'
const store = createStore(
// 合并
combineReducers(reducers),
// 中间件
applyMiddleware(Thunk)
)

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
[3]创建reducer
语法
const init = 初始化的值 // 若是不设置，第一次渲染时默认为undefined
export default function( preState=init, action ){
  const {type, data} = action
  switch (type){
    case type值匹配:
      // 匹配后的逻辑处理
      return 新的state值
    ...
    default:
      return preState
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
渲染过程
  • 在第一次进入页面时 会默认调用所有的reducer, 此时传入的 preState值为
    undefined

    • 1
    默认传入的action值为
    {
  type:@@init... // 后面拼接随机字符
}

    • 1
    • 2
    • 3
  • 后面每次通过dispatch派发action时都会调用对应的reducer
[4]getState

作用：用于获取数据
语法

import { createStore } from 'redux'
const store = createStore(reducer)

store.getState() // 获取数据

  • 1
  • 2
  • 3
  • 4
[5]subscribe

作用：用于监听redux中状态的变化，只要变化，就会走subscribe函数；
原因： redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己来；
语法

import { createStore } from 'redux'
const store = createStore(reducer)

store.subscribe(()=>{
  console.log('逻辑代码-> 更新数据')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
举例说明

下面示例的编写的前提是了解redux的API的基础之上，若是没有了解过，可以结合下方的 API一起看；
在这里插入图片描述

现在有如上示例

  • 第一个：num的值；
  • 第二个：操作数，可以选择为1、2、3
  • 第三个：按钮，点击num的值变为 当前值+操作数
  • 第四个：按钮，点击num的值变为 当前值-操作数
  • 第五个：按钮，点击若是当前num的值为偶数->无变化；若是当前num的值为奇数-> num的值变为 当前值+操作数;
  • 第六个：按钮，点击异步增加num的值

若是值存储在当前组件的state中，代码如下

import React, { Component } from 'react'
export default class New extends Component {
 state = { num: 0 }
 render() {
   const { num } = this.state
   return (
     <div>
       {num}
       &nbsp;
       &nbsp;
       <select ref={this.getref}>
         <option value='1'>1</option>
         <option value='2'>2</option>
         <option value='3'>3</option>
       </select>
       &nbsp;
       <button onClick={()=>{this.calculate('increment')}}>+</button>&nbsp;
       <button onClick={()=>{this.calculate('decrement')}}>-</button>&nbsp;
       <button onClick={()=>{this.calculate('incrementIfOdd')}}>和为基数再加</button>&nbsp;
       <button onClick={()=>{this.calculate('incrementAsync')}}>异步加</button>&nbsp;
     </div>
   )
 }
 getref = (dom) => {
   this.select = dom
 }
 calculate = (type)=>{
   // 获取到select选择的值
   const { value } = this.select
   const { num } = this.state
   switch (type){
     case 'increment':
       this.setState({num: num + +value})
       break;
     case 'decrement':
       this.setState({num: num - +value})
       break;
     case "incrementIfOdd":
       if(num % 2 != 0){
         this.setState({num: num + +value})
       }
       break;
     case 'incrementAsync':
       setTimeout(()=>{
         this.setState({num: num + +value})
       }, 100)
   }
 }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
配置redux
[1] 下载

使用命令npm install --save redux下载redux

[2] 配置
  • (1)在src文件夹下创建一个store文件夹
  • (2) 在store文件夹下创建一个index.js文件 -> 创建store并导出
    import { createStore ,combineReducers,applyMiddleware} from 'redux'
import reducers from './reduces'
import Thunk from 'redux-thunk'
export default createStore(
  combineReducers(reducers), // 合并reducer
  applyMiddleware(Thunk) // 配置中间件
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • (3) 在store 文件夹下创建一个reducers文件夹(因为reducer可以有多个)，有多少个reducer就在reducers文件夹下创建多少个文件
    • num的reducer -> num.js
      // num默认值为0
import {INCREMENT, DECREMENT} from '../static'
export default function( preState=0, action ){
  const {type, data} = action
  switch (type){
    case INCREMENT:
      return preState + data
    case DECREMENT:
      return preState - data
    default:
      return preState // 初始化的时候type为 @@init...
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
    • 集成到reduces文件夹下的index.js文件中
      // 将所有定义的数据发导入到这个对象中然后返回

import numReduce from './num'

const reducers = {
  num: numReduce // 这个值将会作为创建的state中数据的属性名‘num’
};

export default reducers;

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
  • (4)在store 文件夹下创建一个actions文件夹(因为action可以有多个)，有多少组action就在actions文件夹下创建多少个文件
    • 有关num的action -> num.js
      // action可以是一个对象 也可以是一个函数
// 若是action 为一个对象表示同步更新数据，action为一个函数表示异步更新数据
import {INCREMENT, DECREMENT} from '../static'
export const addAction = data => ({type:INCREMENT,data})
export const decreaseAction = data => ({type:DECREMENT,data})
export const addActionAsync = (data, time) =>{
  return (dispatch)=>{
    setTimeout(()=>{
      dispatch(addAction(data))
    },time)
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
    • 集成action到actions文件夹下的index.js中
      import { addAction, decreaseAction, addActionAsync } from './numAction'

export {
  addAction,
  decreaseAction,
  addActionAsync
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
  • (5)创建static.js文件 -> 用于保存action的动作指令
     // 指令
 export const INCREMENT = 'increment' // 加法运算
 export const DECREMENT = 'decrement' // 减法运算

    • 1
    • 2
    • 3

react-redux

由于很多开发者都喜欢在react中使用redux, Facebook就开发了 react-redux。
react-redux将组件分为 容器组件和UI组件

  • UI组件只负责页面的呈现，交互等；在UI组件中不能使用任何关于Redux的API;
  • 容器组件是真正与Redux打交道的，里面可以随意使用Redux的API，最终将结果交给UI组件;
  • 所有的UI组件都应该包裹一个容器组件，他们是父子关系；
  • 容器组件是连接 UI组件 与 Redux的桥梁，容器组件会传递给UI 组件
    • Redux中所保留的状态；
    • 用于操作Redux的方法；
      在这里插入图片描述
语法
connect

connect用于创建一个容器组件

import {connect} from 'react-redux';
export default connect(function1,function2)(UI组件)

  • 1
  • 2

  • connect为一个函数

      connect( 
    state=> {
      return 对象 // return的对象的key ,value将添加在UI组件的props中
    }, 
    dispatch =>{
      return 对象 // return的对象的key ,value将添加在UI组件的props中
    }
  )

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    参数1(mapStateToProps): 是一个回调函数

    • 该函数是 react-redux 调用，该函数在调用时会将state作为参数传入
    • 函数的返回值为一个对象 ，作为UI组件接收的props- 状态

    参数2(mapDispatchToProps): 是一个回调函数

    • 该函数是 react-redux 调用，在调用时会将dispatch 方法作为参数传入
    • 函数的返回值为一个对象，作为UI组件接收的props- 操作状态的方法

    返回值：connect函数的返回值也是一个函数

    • 调用时将 UI组件 作为参数传入
    • 最终得到的值是一个容器组件

注意点：在使用容器组件时需要将 store作为prop传入

  <Count  stroe={ store }/>

  • 1

在UI组件中接收-> 在props中除了接收 connect中接收的两个方法的返回值还有默认的store的属性和方法

Provider组件

若是我们有多个组件 ，每次都需要在容器组件传递 store,而且若是组件不是普通组件而是路由组件还不好传递，此时就可以使用Provider组件

// [1] 引入组件
import { Provider } from 'react-redux'
import store from './store'
// [2] 包裹跟组件
<Provider store={store}>
   <App/>
</Provider>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Provide组件会去查看项目里哪些组件为容器组件 将 store 传递

监听

redux是 redux只负责管理状态，至于状态的改变驱动着页面的展示是需要我们自己控制的

若是使用了react-redux，就不需要自己监听了，当状态改变时会自动渲染对应的UI组件

配置
[1]下载

使用命令 npm i react-redux 下载react-redux；

[2]配置

对于上面例子的改进

import React, { Component } from 'react'
import {addAction, decreaseAction, addActionAsync} from '../../../store/actions/index'
import {connect} from 'react-redux'
class New extends Component {
  render() {
    const { numReduce } = this.props
    return (
      <div>
        {numReduce}
        &nbsp;
        &nbsp;
        <select ref={this.getref}>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
        &nbsp;
        <button onClick={()=>{this.calculate('increment')}}>+</button>&nbsp;
        <button onClick={()=>{this.calculate('decrement')}}>-</button>&nbsp;
        <button onClick={()=>{this.calculate('incrementIfOdd')}}>和为基数再加</button>&nbsp;
        <button onClick={()=>{this.calculate('incrementAsync')}}>异步加</button>&nbsp;
      </div>
    )
  }
  getref = (dom) => {
    this.select = dom
  }
  calculate = (type)=>{
    // 获取到select选择的值
    const { value } = this.select
    const { numReduce,  add, decrease, addAsync} = this.props
    switch (type){
      case 'increment':
        add( +value )
        break;
      case 'decrement':
        decrease( +value )
        break;
      case "incrementIfOdd":
        if(numReduce % 2 != 0){
          add( +value )
        }
        break;
      case 'incrementAsync':
        addAsync( +value , 2000 )
    }
  }
}

export default connect(
  state => {
    return state
  },
  dispatch => {
    return {
      add(value){
        dispatch(addAction( value ))
      },
      decrease(value){
        dispatch(decreaseAction(value))
      },
      addAsync(value,time){
        dispatch(addActionAsync(+value, time))
      }
    }
  }
)(New)



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/510781
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号