一文搞懂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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
浅谈JavaScript作用域
Dec 06 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
文件上传的实现
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php Session无效分析资料整理
2016/11/29 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
不假外出检讨书
2014/01/27 职场文书
迟到检讨书5000字
2014/01/31 职场文书
装修公司管理制度
2015/08/05 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
Python Parser的用法
2021/05/12 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android