Redux 数据仓库

最新推荐文章于 2024-10-31 10:37:36 发布
最新推荐文章于 2024-10-31 10:37:36 发布
阅读量1.4k 收藏
点赞数
分类专栏： react.js 文章标签： 数据仓库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxkgc/article/details/134039324
版权
本文详细介绍了如何在React应用中使用Redux进行状态管理和组件间通信，包括创建Store、Reducer、Action和Dispatch的概念，以及通过Provider和connect组件实现的状态映射和方法共享。
摘要由CSDN通过智能技术生成

Redux 数据仓库

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

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

解决组件的数据通信。

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

关键点：

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

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

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

Dispatch : 将动作触发成方法

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

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

第一种 1. 安装 ： redux

npm install redux --save

2. 引入

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

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

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} // 解构，每次生成新的数据 返回
}

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

const store = createStore(reducer) //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());
}

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

  const Counter  = function(props){
      return (
        <div>
        <h1>计数数量：{ store.getState().num }</h1>
        <button onClick = {add}>计数++</button>
        <button onClick = {decrement }>计数--</button>
        </div>
      )
  }
  1. 数据修改后，监听 和渲染页面
store.subscribe(()=>{//监听数据变化 重新渲染  react时单向数据流

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

完整代码

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
}

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

第二种 react-redux

概念：

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

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

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

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

案例： 和上一个 一样

1 引入包

npm install react-redux --save

2 引入方法

import  {createStore}  from 'redux' 

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

关键点把握

createStore

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

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

        default:
          break

    }
  return {...state}
  }

   const store = createStore(reducer)

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

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

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

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

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

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

两个映射函数

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

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

4 形成新的组件

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

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

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

完整代码 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( <App></App> ,document.getElementById('root'));


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

稍作注释：

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( <App></App> ,document.getElementById('root'));

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

本节结束

九霄123
关注
专栏目录
使用 Redux 和 Axios 获取数据
分享身边生活经验blog
10-15 1143
Redux 是一个状态容器和很好的工具，它解决了 UI 框架的主要问题之一：状态管理。使用 Redux，应用程序状态可以通过称为actions.Redux 状态管理的可预测质量是，如果actions重放，我们每次都会到达正确的数据状态。有许多库可以扩展 Redux 在我们应用程序的状态管理方面的功能。但是我们如何判断哪些适合我们的项目呢？事实是，这些解决方案中的每一个都是根据不同的方法、用例和心智模型构建的，因此它们都有其优点和缺点。
react 中 redux 数据更新后渲染到组件视图方法(两种方法)
Ravings_now的博客
05-16 4603
文件结构： menuDate.js存放reducer和action index.js存放store 方法一： 在目标组件中(想要获取store的数据并渲染的组件):app.jsx 使用store.subscribe()获取store的数据，并用this.setState()更新在组件定义的的数据，即：Collapsed 方法二： 在app.jsx组件中引入menu.jsx组件...
react-不用redux的轻便型结构减轻项目重量同时保留一个数据仓库乞丐版REDUX
08-14
不用redux的轻便型结构，减轻项目重量，同时保留一个数据仓库（乞丐版REDUX）
redux+react-cli创建数据仓库
zhoulib__的博客
01-10 227
介绍 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 安装 npm i redux -S npm i redux-react -S 要引用的模块及作用 import { combineReducers，createStore } from 'redux' import {connect,Provider} from 'react-redux' 代码片段及解释 cre...
reactjs状态管理工具（数据仓库）mobx和redux的对比
学亮编程手记
07-12 320
reactjs状态管理工具（数据仓库）mobx和redux的对比
【React】状态管理仓库 原生\封装\第三方
qq_61834461的博客
07-09 715
状态管理仓库 原生\封装\第三方
redux
baijianwei0408的博客
05-24 227
三大原则 单一数据源 整个应用的state都存储在一个状态树中 State是只读的 只能通过action来改变state 使用纯函数来执行修改 只能通过action来同志reducer来改变state Action action通过store.dispatch把通知发送到reducer中，reducer根据发送来的type进行分别处理。 下面就是一个action。 { type: "ADD_...
react用Redux中央仓库实现一个todolist
12-13
Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，...
react-redux-tutorial：面向初学者的React Redux教程的配套仓库
02-05
Redux遵循单向数据流的概念，所有的状态变化都通过dispatching actions（派发动作）来完成，然后由reducer来决定如何更新state。Redux应用通常包含三个核心部分：store、actions和reducers。 ### 3. React Redux...
探秘Cortex：React开发的高效数据管理库
gitblog_00060的博客
05-15 407
探秘Cortex：React开发的高效数据管理库 cortexAn immutable data store for managing deeply nested structure with React项目地址:https://gitcode.com/gh_mirrors/cortex/cortex 1、项目介绍 Cortex是一个专为React设计的不可变数据存储库，它能轻松管理深度嵌套的数...
探索Freezer：React的理想数据存储方案
gitblog_00059的博客
05-14 299
探索Freezer：React的理想数据存储方案 freezerA tree data structure that emits events on updates, even if the modification is triggered by one of the leaves, making it easier to think in a reactive way.项目地址:https:...
redux实现数据存取的简单写法，简单的写了一下，相信你应该可以看得懂的
lzfengquan的博客
07-02 1601
当我们创建了react项目之后 并安装了redux （我习惯用yarn安装 yarn add redux ） 了解一下 redux 状态管理工具 redux 三大原则 1-1 单一数据源（store是唯一的） 1-2 State是只读的（一旦修改就会产生新的状态） 1-3 使用纯函数来执行修改（同样的输入必定得到同样的输出。不能改变参数） 首先 在创建项目之后 的 src文件夹下创建store文件夹作为仓库，建立 index.js根文件 import { createStore } from 'redux'
redux（函数组件——精简版）
weixin_71893746的博客
03-31 751
派发行为：store.dispatch（{type:'xxx',data:'data'}）三、创建redux文件夹，里面是store.js文件和reducer.js文件。主要是写对数据的操作，如添加，修改，删除等，注意一定要深拷贝，否则页面不会刷新。监听数据的变化，来更新页面：store.subScribe（）创建store：createStore（）读取数据：store.getState（）二、在App.js中正常引入组件即可。四、读取数据和派送行为。
在Redux里怎么存数据？论数据标准化
前端乱谈
06-30 3942
在一个复杂的项目中，我们可以将Redux store看成为客户端的缓存数据库。 众所周知数据库的设计大有讲究，需要考虑到数据查找的性能，和可拓展性。作为前端“数据库”的Redux store也是同样的，存放的方式、位置不好会增加bug出现的几率、读写数据的复杂度、维护的成本。 那你说我们在数据层已经将数据处理了一遍，前端再加一层处理不是多此一举吗？的确，随着对用户体验的要求越来越高，而支持着这种极...
如何使用Redux的核心store数据仓库(二)
Front_ends的博客
12-04 204
简单的一个数据添加，删除，修改（未做） 1.主键redux.js import React, { Component } from 'react'; import { Button, Card, Input, Avatar, Skeleton, List, Icon, Modal } from 'antd'; import store from './store/index'; import 'a...
关于React组件之间如何优雅地传值的探讨
weixin_30470857的博客
12-25 156
闲话不多说，开篇撸代码，你可以会看到类似如下的结构： import React, { Component } from 'react'; // 父组件 class Parent extends Component { constructor() { super(); this.state = { color: 'red' }; } r...
react中redux的初理解【React Components组件—Store数据仓库—Reducers数据处理-Action Creators的关系】
weixin_42618492的博客
08-28 653
1.store的创建—store仓库的数据获取 在src文件下创建store文件夹，然后新建index.js，然后引入第三方模块redux，然后运用createStore()方法创建一个store，这样我们就创建了一个公共的数据仓库。我们把新建的reducer引入进来，这时候store数据仓库中的数据也就被引入进来了。 同时在src下创建reducer.js，reducer负责管里整个项目应用中的数据格式及数据处理。这里的reducer会返回一个函数，函数中会接收两个值：state和action，其.
企业物流管理数据仓库建设的全面指南
大数据指北
10-31 494
企业物流管理数据仓库建设的全面指南。
stays mad 反PCL宣传库。Anti PCL pro.zip
最新发布
10-31
stays mad 反PCL宣传库。Anti PCL pro
React Redux 实战：构建TodoList
Redux作为一个流行的状态管理库，它提供了一个单一的事实来源，即“中央仓库”（store），用于存储和管理应用的所有状态。Redux强调了可预测性的状态变化，通过纯函数式reducers来处理状态更新，确保每次给定相同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值