redux-react多组件进行数据共享

一:数据共享说明

  1. 定义一个Person组件,和Count组件通过redux共享数据
  2. 为Person组件编写:reducer,action,配置constant常量
  3. 重点:Person的reducer和Count的Reducer要使用combinReducers进行合并
  4. 交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”

二:举个例子,count组件和person组件间进行数据共享

首先,需要定义一个在原组件的基础上再定义一个Person组件,配置reducer和action以及constant常量
点击按钮,Person组件页面上新增一个人的信息

src---->constant.js

/* 
    该模块是用于定义action对象中type类型的常量值,目的只有一个,便于管理的同时,防止出现拼写错误的情况
*/
export const INCREMENT='increment'
export const DECREMENT='decrement'
export const ADD_PERSON='add_person'

src----->redux---->reducers---->person.js

import {
   ADD_PERSON} from '../constant'
// 初始化人的列表
const initState=[{
   name:'xiaoxiao',age:18,id:'001'}]

export default function personReducer(preState=initState,action){
   
    const {
   type,data}=action
    switch(type)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Redux是一个独立的JavaScript库,用于管理应用程序的状态。它提供了一个可预测的状态容器,可以在整个应用程序中共享。Redux通过单向数据流来管理状态,使得状态的变化变得可控和可预测。 React-Redux是Redux的官方绑定库,它提供了一些与React集成的功能,使得在React应用中使用Redux更加方便。React-Redux提供了一个Provider组件,它可以将Redux store传递给整个应用程序。它还提供了一个connect函数,它可以将Redux store中的状态映射到React组件的props中,使得React组件可以轻松地访问Redux store中的状态。 ### 回答2: Redux是一个用于JavaScript应用程序的状态容器,它提供了一个可预测且可维护的方式来管理应用程序的状态。Redux的核心概念是“单一数据源”,即将整个应用程序的状态存储在单一对象树中,并且任何组件都可以访问和修改该状态树的任意部分。 react-redux是一个与React紧密集成的Redux绑定库。它提供了一组React组件和API,使得使用Redux在React应用程序中更加容易。 redux和react-redux之间的关系可以理解为Redux是一种状态管理库,而react-redux是Redux与React之间的纽带。 具体来说,react-redux提供了两种主要的API:Provider和connect。 Provider是一个React组件,允许我们将应用程序的Redux存储连接到React组件树中的所有组件。在Provider组件内部,可以通过store属性传递Redux存储对象,使得所有组件都可以访问该存储。 connect是一个高阶组件,用于将React组件连接到Redux存储中的状态和操作。通过connect,我们可以在React组件中访问Redux状态,以及派发Redux操作。connect本质上是一个函数,它接收一个组件作为参数并返回一个新的连接了Redux存储的组件。 总之,redux和react-redux之间的区别在于,redux是一个独立的状态管理库,而react-redux是Redux和React之间的桥梁,帮助React应用程序连接到Redux存储,并访问存储中的状态和操作。 ### 回答3: Redux和React-Redux都是在React项目中使用的JavaScript库。Redux是一个JavaScript状态容器,用于管理应用程序中的所有状态。Redux允许将状态存储在一个单一的地方,以便在整个应用程序中共享该状态。React-Redux是React的一个库,用于与Redux一起使用,以便在React组件中访问和更新Redux状态。 Redux通过store提供一个单一的状态树,包含了整个应用程序的状态。通过使用store中的action和reducer,Redux可以跟踪状态的所有更改。这可以帮助开发人员更容易地调试和管理代码。但是,使用Redux需要一定的时间和精力来管理各个状态,尤其在较大的代码库中尤其如此。 React-Redux库是Redux的一个扩展,它提供了一组工具来帮助React组件访问和更新Redux状态。通过提供Provider组件,React-Redux使得Redux存储的状态可以传递到整个应用程序中的所有组件。通过使用connect函数和mapStateToProps和mapDispatchToProps参数,React-Redux允许开发人员将Redux状态映射到React组件中。这样,开发人员就可以根据需要将Redux状态作为props传递给组件,并且可以更方便地将状态更改传递回Redux store。 总之,Redux为React提供了一个易于管理的状态储存架构,以帮助应用程序开发人员管理和跟踪应用程序状态。React-Redux是一组工具,它使开发人员可以更方便地在React组件中使用Redux,从而帮助开发人员更快地开发应用程序。两者的区别在于Redux是包含整个应用程序状态的状态容器,而React-Redux则是提供了一组工具,以帮助开发人员更方便地在React组件中使用Redux状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值