在react中使用redux && react-redux的使用demo

这篇具有很好参考价值的文章主要介绍了在react中使用redux && react-redux的使用demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

redux是一种状态管理工具,可以存储和操作一些全局或者很多组件需要使用的公共数据。

平心而论,redux的使用对于新上手来说不太友好,多个依赖包的,多种api的结合使用,相对来说比做同样一件事的vuex用起来比较麻烦.不过,熟能生巧,用多了也就习惯了,下面是个人的一个demo,是自己根据尚硅谷张天禹react教程学习的,然后写的demo.

这个demo是一个实用版本的demo,而不是深入研究redux本身的各种api操作

思路和准备:

需要的依赖包:

redux : 状态管理的核心插件(不仅仅是在react中能用,也可以在vue中用,但很显然,vue不需要 !--)

react-redux : 专门让redux和react之间对接的一个插件,让redux写起来没有那么的麻烦,(相对没有)

redux-devtools-extension : 调试工具,类似于vue-devtools,方便调试和查看,(当然了,本人是console.log党,用得少,配置上就行了)

redux-thunk: 可以让redux的值进行异步的修改,比较重要,能节省不少东西

思路:

首先,先要创建一个store,store是每个组件访问的核心,就像淘宝网站一样.

然后每个网站里面都有自己的商店,不同的商店对应不同的商品和购买方式,所以你就需要针对具体的数据类型,配置具体操作他的方法.

然后每个组件就像消费者一样,可以直接访问淘宝网站和站内所有的店铺,并且可以选取你希望他方式购买他,并且你的消费对其他客户也会造成影响,比如这件商品只剩一件了,你买了,其他用户就没货了,这也就是全局数据状态共享的意义.

ok了.学会了这些,那就直接展示代码了,感觉条例还是比较清晰的.

文件结构

|-- src(业务文件夹)        ---------------互联网世界

    |--pages(普通组件文件夹)    --------------电商领域     

        |--index.jsx(demo父组件)    --------------消费者集合

        |--demo1.jsx(子组件1)   --------------消费者1

        |--demo2.jsx(子组件2)   --------------消费者2

    |--redux(redux文件夹)

        |--actions(修改demo1数据状态的操作函数集合)  ------------消费者购物方式集合

            |--demo1Actions.js(demo1数据操作方法)     -------------京东支付,选择加急,使用京豆

            |--demo2Actions.js(demo2数据操作方法)     -------------微信支付,不着急,坐等快递

        |--reducers(全局状态初始化和操作分发的集合)  

            |--demo1.js(demo1的数据)  -------------网店1

            |--demo2.js(demo2的数据)  -------------网店2

            |--index.js(全局数据集合)  --------------网店集合

        |--store.js(全局数据的载体)   ---------------电商网站

|--App.jsx(根组件) 

|--main.jsx(项目入口组件)   ---------------互联网

大概就是这么一个比喻,希望看客老爷们能理解我的这种比喻

某位大佬创建了一个电商网站,叫做四道(store).store里面可以创建很多网店,这些网店叫做瑞丢瑟斯(reducers).现在两个消费者,戴某1和戴某2,有两个店铺叫做demo1和demo2.

戴某1看上了demo1店铺的一件商品,情侣表,这个商品只有2件了,然后demo1就买了他,他将这个商品的接收地址分别发给了他自己和他对象那里,这个怎么买是他自己决定的,这个操作就是艾克神(action).因为戴某1买了这两件件商品,demo1店铺里面就没有这两件商品了.等到戴某2也想买这件商品的时候,发现这件商品已经空了.所以,店铺练得商品就是全局的数据or状态.

ok了,上具体代码:

代码

redux/store.js
// store构建方法
import {legacy_createStore,applyMiddleware} from 'redux'

// 支持异步
import thunk from 'redux-thunk'

// 开发工具
import {composeWithDevTools} from 'redux-devtools-extension'

// 所有的reducers
import reducer from './reducers'

// 将这些方法和参数组合,形成一个全局的store,store也是redux的核心
export default legacy_createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'reset-css'
import './index.css'
import store from './redux/store.js'
import {Provider} from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  // <React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
    
  // </React.StrictMode>,
)
redux/reducers/index.js
import {combineReducers} from 'redux'
import demo1 from './demo1'
import demo2 from './demo2'


//将会在store上暴露的模块
export default combineReducers({
    demo1,
    demo2
})
redux/reducers/demo1.js
const initValue = 0
export default function demo1(value = initValue,action){
    console.log(action,'点击了')
 const {type,data} = action
 switch(type){
    case 'add':
        return value+data;
    case 'delete':
        return value-data;
    default:
        return value
 }
}
redux/reducers/demo2.js
//初始化的值
const initValue = {
    name:'王惊涛',
    age:27
}

export default function demo2(value=initValue,action){
const {type,data} = action
switch(type){
  case 'change':
    return data
  default:
    return value
}
}
redux/actions/demo1Actions.js
export const addAction = data => ({type:'add',data})
export const deleteAction = data => ({type:'delete',data})
export const asyncAddAction = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(addAction(data))
        },time)
    }
} 
redux/actions/demo2Actions.js
export const changeData = data => ({type:'change',data})
src/pages/index.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import Demo1 from './demo1'
import Demo2 from './demo2'
export default  withRouter(class index extends Component {
  render() {
    return (
      <div>
        <Demo1></Demo1>
        <hr />
        <Demo2></Demo2>
      </div>
    )
  }
})
src/pages/demo1.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import {connect} from 'react-redux'
import {addAction,deleteAction} from '../../redux/actions/demo1Actions'
import {Button} from 'antd'
const Demo1 =  withRouter(class index extends Component {
    addValue = ()=>{
      this.props.addAction(1)
    }
    deleteValue = ()=>{
      this.props.deleteAction(1)
    }
  render() {
    console.log(this.props,'this.props---')
    return (
      <div>
        <h4>demo1页面</h4>
        <p>原始操作值:{this.props.demo1}</p>
        <Button onClick={this.addValue}>增加1</Button>
        <Button onClick={this.deleteValue}>减少1</Button>
        <br />
        <p>demo2里面的内容:---- 姓名:{this.props.demo2.name}   年龄:{this.props.demo2.age}</p>
      </div>
    )
  }
})

export default connect(
    state =>({
        demo1:state.demo1,
        demo2:state.demo2
    }),
    {addAction,deleteAction}
)(Demo1)
src/pages/demo2.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import { connect } from 'react-redux'
import {changeData} from '../../redux/actions/demo2Actions'
import {addAction} from '../../redux/actions/demo1Actions'
import {Input,Button} from 'antd'
const Demo2 = withRouter( class index extends Component {
    state = {
        data:null
    }
    InputStype = {
      width:'400px'
    }
    componentDidMount(){
      console.log(this.props,'demo2中的props值')
        this.setState({
            data:this.props.demo2
        },()=>{
            console.log(this.props,'this.props---demo2???')
        })
    }
    changeData = ()=>{
      this.props.changeData({
        name:'马师',
        age:28
      })
    }
    addHandler = ()=>{
      this.props.addAction(1)
    }
  render() {
    return (
      <div>
        <h4>demo2页面</h4>
        <Button onClick={this.changeData}>修改值</Button>
        <Button onClick={this.addHandler}>增加值</Button>
        <p>姓名:{this.props.demo2.name}</p>
        <p>年龄:{this.props.demo2.age}</p>
        <br />
        <p>demo1里面的值:{this.props.demo1}</p>
      </div>
    )
  }
})

export default connect(
    state=>({
        demo1:state.demo1,
        demo2:state.demo2
    }),
    {changeData,addAction}
)(Demo2)
withRouter.jsx
import {
    useLocation,
    useNavigate,
    useParams,
  } from "react-router-dom";
  
  function withRouter(Component) {
    function ComponentWithRouterProp(props) {
      let location = useLocation();
      let navigate = useNavigate();
      let params = useParams();
      return (
        <Component
          {...props}
          router={{ location, navigate, params }}
        />
      );
    }
  
    return ComponentWithRouterProp;
  }

  export default withRouter

感觉有用的就给个赞吧,谢啦!文章来源地址https://www.toymoban.com/news/detail-740037.html

到了这里,关于在react中使用redux && react-redux的使用demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等

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

    2024年02月11日
    浏览(51)
  • React中使用Redux (一) - 在React中直接使用Redux

    开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux 。 尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描述界面的状态,Redux可以发射状态的更新, 让他们作出相应; 目前redux在react中使

    2024年01月23日
    浏览(58)
  • 什么是redux?如何在react 项目中使用redux?

    redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用,但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则,通过一个全局的状态树来管理应用程序的状态,从而使状态的变化更加可预测和已于维护。 redux的核心

    2024年02月15日
    浏览(38)
  • React中使用Redux

            redux是一个专门用于状态管理的一个库,和vue中的vuex功能类似。其中核心点就是状态的管理。虽然我们无论在vue还是在react中我们组件间的通行都可以使用消息总线或者父子组件间的消息传递来进行操作。但是如果我们需要A组件的状态在其他十个或者二十个组件上进

    2024年02月16日
    浏览(47)
  • 【React】Redux的使用详解

    ◼ 单一数据源 ​  整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个 store 中: ​  Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护; ​  单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; ◼ St

    2024年01月18日
    浏览(35)
  • Redux - Redux在React函数式组件中的基本使用

    Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。 它主要的几个方法如下: 重要的有方法 有 dispatch(分发action) 、 getState(获取state) 、 subscribe(监听state的变化) ,下面会介绍到,另外两个可以不用管; 那什么时候使用Redux呢? 当遇到如下问题时,建议开始使

    2024年02月13日
    浏览(45)
  • React - redux 使用(由浅入深)

    中文文档: http://www.redux.org.cn/ 英文文档: https://redux.js.org/ Github: https://github.com/reactjs/redux 可直接参照 目录十 进行使用 react-redux redux 是一个专门用于做状态管理的JS库(不是react插件库)。 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。 作用: 集中式管理 re

    2024年02月07日
    浏览(50)
  • React--》Redux Toolkit的使用讲解

    目录 Redux Toolkit redux toolkit的基本使用 RTK代码模块化 RTK QUERY的使用 useQuery参数 Redux Toolkit是Redux的工具包,简称RTK,可以帮助我们处理使用Redux过程中的重复性工作,简化Redux中的各种操作,当然博主也不可能将RTK讲解的面面俱到,看完本篇文章后还是推荐大家多多看一下 官方

    2024年02月01日
    浏览(44)
  • react中使用redux,但是通过useEffect监听不到redux中的数据变化?

    在React中使用Redux并通过useEffect监听Redux中的数据变化时,需要使用 react-redux 库中的 useSelector 钩子来选择需要监听的Redux状态。 useSelector 函数允许您从Redux存储中选择和获取特定的状态。 以下是一种在React组件中使用Redux,并通过useEffect监听Redux中的数据变化的常见方法: 首先

    2024年02月16日
    浏览(48)
  • React - Redux Hooks的使用细节详解

    Redux中Hooks介绍 在之前的redux开发中,为了让组件和redux结合起来,我们使用了react-redux库中的connect : 但是这种方式必须使用高阶函数结合返回的高阶组件; 并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解; 在Redux7.1开始,提供了Hook的方式

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包