一文搞懂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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
判断访客终端类型集锦
Jun 05 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
JS实现简单九宫格抽奖
Jun 28 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
Smarty中的注释和截断功能介绍
2015/04/09 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
对numpy中轴与维度的理解
2018/04/18 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
Flask处理Web表单的实现方法
2021/01/31 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
全国文明单位申报材料
2014/05/31 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
文明单位创建材料
2014/12/24 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL