一文搞懂redux在react中的初步用法


Posted in Javascript onJune 09, 2021

Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题。例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用。

如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点。

import React, { Component, Fragment } from 'react';

//Class引入
import { connect } from 'react-redux';

//Hook引入
import { useSelector, useDispatch } from 'react-redux'

import { add, clear } from '../../redux/actions/count';


//hook 展示组件
const CountItem = (props) => {
    // 解构出来
    const {
        count,
        flag,
        add,
        clear
    } = props
    return (
        <>
            <h2>当前求和为:{count}</h2>
            <h3>当前Flag:{flag ? 'true' : 'false'}</h3>
            <button onClick={add}>点击+1</button>
            <button onClick={clear}>清零</button>
        </>
    )
}

//hook 容器组件
const Count = () => {
    const count = useSelector(state => state.sum)
    const flag = useSelector(state => state.flag)
    const dispatch = useDispatch()

    const countAdd = () => {
        console.log(add.type)
        dispatch(add(1))
    }

    const clearNum = () => {
        dispatch(clear())
    }

    return <CountItem count={count} flag={flag} add={countAdd} clear={clearNum}  />
}

export default Count



// class 展示组件
// class Count extends Component {
//     add = () => {
//         // 通知redux
//         this.props.add(1);
//     };
//     clear = () => {
//         this.props.clear();
//     };
//     render() {
//         return (
//             <Fragment>
//                 <h2>当前求和为:{this.props.count}</h2>
//                 <h3>当前Flag:{this.props.flag ? 'true' : 'false'}</h3>
//                 <button onClick={this.add}>点击+1</button>
//                 <button onClick={this.clear}>清零</button>
//             </Fragment>
//         );
//     }
// }

// class 容器组件
// export default connect(
//     // 1.状态
//     state => ({ count: state.sum, flag: state.flagState }),
//     // 2.方法
//     { add, clear }
// )(Count);

基本的使用差不多就是这个样子,我们在hook上面用到的关键方法就是useSelector来使用redux的state、用dispatch来调用reduce;在class组件中用connect进行state和方法(reduce)的关联。

这里面难点就在于reduce和state

这里的reduce是什么

上面的代码里面我们用到了add和clear这两个方法,我们新建一个js文件来实现这两个方法。

// 为Count组件创建action对象
// 引入常量
import { ADD, CLEAR } from '../constant';

// 创建加一action对象的函数
export const add = data => ({
    type: ADD,
    data,
});

// 创建清零action对象的函数
export const clear = data => ({
    type: CLEAR,
    data,
});

上面有常量----这是为了方便actionType的统一管理,创建对应的action对象有助于代码模块化。
贴上,自己建一个constant.js放进去

export const ADD = 'add';
export const CLEAR = 'clear';

到这里我们的action对象定义的差不多了,我们要进行reducer的管理了。也就是dispatch分发上面的action对象来实现state的更新

在reducer文件夹里面我们定义一个count.js

// 为Count组件创建一个reducer
// reducer接收两个参数:之前状态的preState,动作对象action

import { ADD, CLEAR } from '../constant.js';

// 设定初始状态
const initState = 0;

export default function addReducer(preState = initState, action) {
    // 从action中获取type和data
    const { type, data } = action;
    // 根据type决定如何加工数据
    switch (type) {
        case ADD:
            return preState + data;
        case CLEAR:
            return 0;
        // 初始化动作
        default:
            return preState;
    }
}

上面的方法要通过dispatch来进行type的分发调用(强调加一)

到这里使用就完成了 接下来看配置redux到react项目中

这里就不要倒叙了,因为这里倒叙不合理。
这里关键的几个配置
store.js的配置和全局的store的使用

先看全局使用store
在你的根路由下面用Provider包裹App。

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

ReactDOM.render(
    // Provider包裹App,目的:让App所有的后代容器组件都能接收到store
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

这里面有个redux/store.js 看代码

// 整个文档只有一个store对象,createStore接收两个参数,第一个是state树,第二个是要处理的action
//applyMiddleware 汇总所有的中间件变成一个数组依次执行,异步处理
import { createStore, applyMiddleware } from 'redux';
//中间件
import thunk from 'redux-thunk';
//汇总所有的reducer
import allReducers from './reducers/index';
//这里是goole的调试调试工具,具体使用:百度
import { composeWithDevTools } from 'redux-devtools-extension';

// 暴露store
export default createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)));

到这里这篇文章就要结束了,里面的一些执行流程和原理我还不是理解,接下来仍要多多巩固,多多学习。

以上就是一文解决redux在react中的初步使用的详细内容,更多关于redux在react中使用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
深入详解JS函数的柯里化
Jun 09 #Javascript
javascript canvas实现雨滴效果
用JS实现飞机大战小游戏
Jun 09 #Javascript
原生JS实现飞机大战小游戏
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
JavaScript如何优化逻辑判断代码详解
Jun 08 #Javascript
浅谈react useEffect闭包的坑
You might like
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python素数检测的方法
2015/05/11 Python
python计算列表内各元素的个数实例
2018/06/29 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python查看数据类型的方法
2019/10/12 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
《花木兰》教学反思
2014/04/09 职场文书
交通事故协议书
2014/04/15 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
用CSS3画一个爱心
2021/04/27 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
canvas实现贪食蛇的实践
2022/02/15 Javascript
一文简单了解MySQL前缀索引
2022/04/03 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技