react-redux的使用

分类：React作者：编程之家用户

2.react-redux的使用

npm install --save react-redux

1.基本使用

containers/Count.jsx
-- 容器组件 -- 用于传递 redux保存的状态和操作状态的方法 到 UI组件中

// 引入Count的UI组件
import CounUI from "../../components/Count";
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from "../../redux/count_action";


// 引入connect用于连接UI组件与redux
import {connect} from "react-redux";

// 1.mapStateToProps函数的返回的是一个对象，
// 2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value--状态
// 3.mapStateToProps用于传递状态
// 4.容器连接UI组件时就已经把store的初始状态state传递给mapStateToProps函数
const mapStateToProps = (state) => {
    return {count: state}
}

// 1.mapDispatchToProps函数的返回的是一个对象，
// 2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value--操作状态的方法
// 3.mapDispatchToProps用于传递操作状态的方法
// 4.容器连接UI组件时react-redux就已经把store的dispatch方法传递给mapDispatchToProps函数
const mapDispatchToProps = (dispatch) => {
    return {
        jia: number => dispatch(createIncrementAction(number)),
        jian: number => dispatch(createDecrementAction(number)),
        jiaAsync: (number,time) => dispatch(createIncrementAsyncAction(number, time)),

    }
}


// 使用connect()()创建并暴露一个Count容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CounUI)

components/Count.jsx
-- UI组件 -- 通过this.props接收 redux保存的状态和操作状态的方法

import React, {Component} from 'react';


class CountUI extends Component {

    increment = () => {
        const {value} = this.selectNumber
		// 使用容器组件传递的方法
        this.props.jia(value*1)
    }
    decrement = () => {
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    incrementOdd = () => {
        const {value} = this.selectNumber
		// 使用容器组件传递的状态
        if (this.props.count % 2 !== 0){
            this.props.jia(value*1)
        }
    }
    incrementAsync = () => {
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1, 500)
    }

    render() {
        // console.log('UI组件接收到的props是：',this.props)
        return (
            <div>
                <h1>当前求和为： {this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>当前求和为奇数加</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}

export default CountUI;

2.优化

将UI组件写到容器组件下：

import React, {Component} from 'react';
// 引入connect用于连接UI组件与redux
import {connect} from "react-redux";
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from "../../redux/count_action";

// 定义UI组件
class Count extends Component {

    increment = () => {
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    decrement = () => {
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    incrementOdd = () => {
        const {value} = this.selectNumber
        if (this.props.count % 2 !== 0){
            this.props.jia(value*1)
        }
    }
    incrementAsync = () => {
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1, 500)
    }

    render() {
        // console.log('UI组件接收到的props是：',this.props)
        return (
            <div>
                <h1>当前求和为： {this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>当前求和为奇数加</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}

// 映射状态
// const mapStateToProps = state => ({count: state})

// 映射操作状态的方法
// const mapDispatchToProps = dispatch => (
//     {
//         jia: number => dispatch(createIncrementAction(number)),
//         jian: number => dispatch(createDecrementAction(number)),
//         jiaAsync: (number,time) => dispatch(createIncrementAsyncAction(number, time)),
//     }
// )



// 使用connect()()创建并暴露一个Count容器组件
export default connect(
    state => ({count: state}),

    // mapDispatchToProps的一般写法
    // dispatch => ({
    //     jia: number => dispatch(createIncrementAction(number)),
    //     jian: number => dispatch(createDecrementAction(number)),
    //     jiaAsync: (number,time) => dispatch(createIncrementAsyncAction(number, time)),
    // })

    // mapDispatchToProps的简写方法
    // 简写不需要写dispatch，react-redux会自动分发
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction,
    }
    )(Count)

在index.js中：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";
import {Provider} from "react-redux";


ReactDOM.render(
    // Provider专门为多个容器组件传递store，不用每个容器组件单独传store
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

// 监测redux中状态的变化，只要redux中状态发生变化，就调用render重新渲染
// 使用react-redux就不需要再监测了，redux发生状态就会自动渲染
// store.subscribe(()=>{
//       ReactDOM.render(<App />, document.getElementById('root'))
// })

3.数据共享

多个容器组件之间数据的共享

由于是多个容器组件，那就存在多个不同的reducer,

// 引入 combineReducers,用于汇总多个reducer
import { combineReducers} from "redux";
// 引入为Count组件服务的reducer
import count from "./count";
// 引入为Person组件服务的reducer
import persons from "./person";

// combineReducers作用：汇总所有的reducer变成一个总得reducer
const allReducer = combineReducers({
    count,
    persons,
})        

export default allReducer

在store.js中使用allReducer

export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

Count.jsx

import React, {Component} from 'react';
// 引入connect用于连接UI组件与redux
import {connect} from "react-redux";
import {
    increment,
    decrement,
    incrementAsync
} from "../../redux/actions/count";

// 定义UI组件
class Count extends Component {

    increment = () => {
        const {value} = this.selectNumber
        this.props.increment(value * 1)
    }
    decrement = () => {
        const {value} = this.selectNumber
        this.props.decrement(value * 1)
    }
    incrementOdd = () => {
        const {value} = this.selectNumber
        if (this.props.count % 2 !== 0) {
            this.props.increment(value * 1)
        }
    }
    incrementAsync = () => {
        const {value} = this.selectNumber
        this.props.incrementAsync(value * 1, 500)
    }

    render() {
        // console.log('UI组件接收到的props是：',this.props)
        return (
            <div>
                <h2>我是Count组件</h2>
                <h4>下方人总数为：{this.props.personsCount}</h4>
                <h1>当前求和为： {this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>当前求和为奇数加</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}


// 使用connect()()创建并暴露一个Count容器组件
// 由于用了合并reducer方法，所以state变成了一个对象
export default connect(
    state => ({
        count: state.count,
        personsCount:state.persons.length}), // 在Count中使用Person的数据
    {
        increment,
        decrement,
        incrementAsync,
    }
)(Count)

Person.jsx

import React, {Component} from 'react';
import {nanoid} from "nanoid";
import {connect} from "react-redux";
import {addPerson} from '../../redux/actions/person'


class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        const personObj = {id:nanoid(),name,age}
        this.props.addPerson(personObj)
        this.nameNode.value = ''
        this.ageNode.value = ''
        
    }

    render() {
        return (
            <div>
                <h2>我是Person组件</h2>
                 <h4>上方求和为{this.props.count}</h4>
                <input ref={c=>this.nameNode = c} type="text" placeholder='输入名字'/>
                <input ref={c=>this.ageNode = c} type="text" placeholder='输入年龄'/>
                <button onClick={this.addPerson}> ADD</button>
                <ul>
                    {
                        this.props.persons.map(ren=>{
                            return (
                                <li key={ren.id}>
                                    {ren.name}---{ren.age}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default connect(
    state=>({
        persons:state.persons,
        count:state.count}),  // 在Person中使用Count的数据
    {addPerson}
)(Person);

原文地址：https://www.cnblogs.com/guapitomjoy/p/15223850.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot