• Redux 数据仓库

    Redux 数据仓库

    解决React 数据管理（状态管理） ，用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。

    作者：如果你不知道是否需要使用Redux,那么你就不需要它！

    解决组件的数据通信。

    解决书和交互 较多的应用。

    关键点：

    Store: 数据仓库，保存数据的地方。

    State :state 是一个对象，数据仓库里的所有数据都放到1个state里。

    Action : 1 个动作， 触发数据改变的方法。

    Dispatch : 将动作触发成方法

    Reducer ：是一个函数，通过获取动作，改变数据，生成一个新state. 从而改变页面。

    案例： 点击加减事件，控制仓库的数据变化

    第一种 1. 安装 ： redux

    npm install redux --save

    • 1

    2. 引入

    // 引入仓库和 解构创建仓库的方法

import Redux , {creatStore, createStore}  from 'redux' 
这个例子只用了这一个 createStore


    • 1
    • 2
    • 3
    • 4
    • 5

    3. 根据业务逻辑创建函数

    // 2. 创建函数  通过动作 用于创建新的state   参数：传入需要修改的数据 和方法 (形参)
const reducer = function(state = { num: 0 }, action ){

    switch(action.type){
      case "add_" :
        state.num++;
        break;
        case "decrement_" :
          state.num--;
          break;
          default:
          break;
    }
    return {...state} // 解构，每次生成新的数据 返回
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    4. 创建仓库 把业务函数放入仓库

    const store = createStore(reducer) //1. 创建仓库  放置要给函数，专门用于管理状态

    • 1

    5 两个点击事件

    function add(){

  //通过仓库的方法 dispatch 进行修改数据
  store.dispatch({type:"add_" ,name:'lyx'}) //传递数据到第二步 创建的函数中 ->action中
  console.log(store.getState());

}

function decrement(){
  //通过仓库的方法 dispatch 进行修改数据
  store.dispatch({type:"decrement_"})
  console.log(store.getState());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    6 使用仓库数据的面板 组件

      const Counter  = function(props){
      return (
        <div>
        <h1>计数数量：{ store.getState().num }</h1>
        <button onClick = {add}>计数++</button>
        <button onClick = {decrement }>计数--</button>
        </div>
      )
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 数据修改后，监听 和渲染页面
    store.subscribe(()=>{//监听数据变化 重新渲染  react时单向数据流

  ReactDOM.render( <App></App> ,document.getElementById('root'));
})

    • 1
    • 2
    • 3
    • 4

    完整代码

    App.js

    import React from 'react';
// import ReactDOM from 'react-dom';

// 引入仓库和 解构创建仓库的方法
import Redux , {creatStore, createStore}  from 'redux' 

// 2. 创建函数  通过动作 用于创建新的state   参数：传入需要修改的数据 和方法 (形参)
const reducer = function(state = { num: 0 }, action ){
console.log(action);
    switch(action.type){
      case "add_" :
        state.num++;
        break;
        case "decrement_" :
          state.num--;
          break;
          default:
          break;
    }
    return {...state} // 解构，每次生成新的数据 返回
}

const store = createStore(reducer) //1. 创建仓库  放置要给函数，专门用于管理状态

function add(){

  //通过仓库的方法 dispatch 进行修改数据
  store.dispatch({type:"add_" ,name:'lyx'}) //传递数据到第二步 创建的函数中 ->action中
  console.log(store.getState());

}

function decrement(){
  //通过仓库的方法 dispatch 进行修改数据
  store.dispatch({type:"decrement_"})
  console.log(store.getState());
}

// 函数式的计数器

  const Counter  = function(props){
      return (
        <div>
        <h1>计数数量：{ store.getState().num }</h1>
        <button onClick = {add}>计数++</button>
        <button onClick = {decrement }>计数--</button>
        </div>
      )
  }



  class App extends React.Component {
    render(){
      return(   
            <div id = 'app'>    
                    我是 app组件
                    <Counter></Counter>
          </div>
      )
}}



export {
   App ,store
}


    • 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

    index.js

    import React from 'react';
import ReactDOM from 'react-dom';
import Redux , {creatStore, createStore}  from 'redux' 

import {App ,store } from './App';

  ReactDOM.render( <App></App> ,document.getElementById('root'));


store.subscribe(()=>{//监听数据变化 重新渲染  react时单向数据流

  ReactDOM.render( <App></App> ,document.getElementById('root'));
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    第二种 react-redux

    概念：

    Provider组件： 自动将store里的state和组件进行关联。

    MapStatetoProps： 这个函数用于将store的state映射到组件的 props

    mapdispatchToProps： 将store中的dispatch 映射到组件的props里，实现了方法的共享。

    Connect 方法： 将组件和数据（方法）进行连接。

    案例： 和上一个 一样

    1 引入包

    npm install react-redux --save


    • 1
    • 2

    2 引入方法

    import  {createStore}  from 'redux' 

import  {Provider, connect }  from 'react-redux' 


    • 1
    • 2
    • 3
    • 4

    关键点把握

    createStore

      function reducer(state={num:0},action){

    switch(action.type){
      case "add":
        state.num++;
        break;

        default:
          break

    }
  return {...state}
  }

   const store = createStore(reducer)


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    Provider（ n. 供应者；养家者） 自动将store里的state和组件进行关联。

       ReactDOM.render(
    <Provider store= {store}>
    <App></App>
    </Provider>,
    document.getElementById('root')
    )


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

    connect 将组件和数据（方法）进行连接。

     const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)


    • 1
    • 2
    • 3
    • 4
    • 5

    3 数据的获取，数据的修改

    要state映射到组件的props中，将修改数据的方法映射到组件的props中。

    两个映射函数

    //将state映射到props函数
function mapStateToProps(state){
    return{
      value:state.num
    }
}

//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){
  return{
   onAddClick:()=>{dispatch(addAction)}
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    4 形成新的组件

    // 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。

const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)


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

    5 原组件获得方法和属性值

    class Counter extends React.Component{

    render(){
      //计数，通过stroe的state传给props,直接通过props就可以将state的数据获取
      const value = this.props.value
      const onAddClick = this.props.onAddClick;
      // 等同于vuex的 mapMutation mapState

      return(
       <div>
         <h1>技术的数量：{value}</h1>
         <button onClick = {onAddClick}> 数字+1</button>
       </div>
      )
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    完整代码 index.js

    import React from 'react';
import ReactDOM from 'react-dom';


import  {createStore}  from 'redux' 
import  {Provider, connect }  from 'react-redux' 
// Provider  渲染标签

class Counter extends React.Component{

    render(){
      console.log(this);
      //计数，通过stroe的state传给props,直接通过props就可以将state的数据获取
      const value = this.props.value
      const onAddClick = this.props.onAddClick;
      // 等同于vuex的 mapMutation mapState

      return(
       <div>
         <h1>技术的数量：{value}</h1>
         <button onClick = {onAddClick}> 数字+1</button>
       </div>
      )
    }
}

  const addAction = {
    type:"add"
  }


  function reducer(state={num:0},action){

    switch(action.type){
      case "add":
        state.num++;
        break;

        default:
          break

    }
  return {...state}
  }

   const store = createStore(reducer)


//将state映射到props函数
function mapStateToProps(state){
    return{
      value:state.num
    }
}

//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){
  return{
   onAddClick:()=>{dispatch(addAction)}
  }
}

// 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。

const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)


  // ReactDOM.render(  ,document.getElementById('root'));


    ReactDOM.render(
    <Provider store= {store}>
    <App></App>
    </Provider>,
    document.getElementById('root')
    )




    • 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
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    稍作注释：

    import React from 'react';
import ReactDOM from 'react-dom';


import  {createStore}  from 'redux' 
import  {Provider, connect }  from 'react-redux' 
// Provider  渲染标签

// 第一步： 构建类组件   目的： 可以使用类组件的props
class Counter extends React.Component{

    render(){
      console.log(this);
      //计数，通过stroe的state传给props,直接通过props就可以将state的数据获取
      const value = this.props.value
      const onAddClick = this.props.onAddClick;
      // 等同于vuex的 mapMutation mapState

      return(
       <div>
         <h1>技术的数量：{value}</h1>
         <button onClick = {onAddClick}> 数字+1</button>
       </div>
      )
    }
}

// 第二步： 构建业务逻辑  初始化仓库
  function reducer(state={num:0},action){

    switch(action.type){
      case "add":
        state.num++;
        break;

        default:
          break

    }
  return {...state}
  }

   const store = createStore(reducer)


//将state映射到props函数
function mapStateToProps(state){
    return{
      value:state.num
    }
}

const addAction = {
  type:"add"
}

//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){
  return{
   onAddClick:()=>{dispatch(addAction)}
  }
}

// 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。

const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)


  // ReactDOM.render(  ,document.getElementById('root'));

  // Provider 自动将store里的state和组件进行关联。
    ReactDOM.render(
    <Provider store= {store}>
    <App></App>
    </Provider>,
    document.getElementById('root')
    )




    • 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
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    本节结束

  • 相关阅读:
    设计模式和Java类加载器简单介绍
    java计算机毕业设计ssm+vue招标投标系统
    遭受网络攻击泄露了101GB数据
    H3C V7版本交换机配置IRF
    基于WEB的在线选课系统（asp.net）
    动态代理：一种灵活的设计模式
    app 更新 对aso是否有影响
    系统内存的探测
    python-0006-django路由
    ClickHouse的分片和副本
  • 原文地址：https://blog.csdn.net/lyxkgc/article/details/134039324