一文搞懂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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
python读写文件操作示例程序
2013/12/02 Python
Python标准库与第三方库详解
2014/07/22 Python
Python解析nginx日志文件
2015/05/11 Python
Python三级菜单的实例
2017/09/13 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
个人租房协议书
2014/04/09 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
简历自荐信范文
2015/03/09 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
React 高阶组件HOC用法归纳
2021/06/13 Javascript
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS