回顾 redux react-redux

最新推荐文章于 2021-07-21 20:48:46 发布
最新推荐文章于 2021-07-21 20:48:46 发布
阅读量149 收藏
点赞数
分类专栏： React 文章标签： react react-redux redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44420276/article/details/101103095
版权

最近在忙着写自己的react个人项目。现在用到redux这块，嗯，虽然之前写过，也回顾一下，但还是有点生疏，故在此写个简单的案例，回顾一下。

有兴趣的朋友可以 于此链接 redux初识。人毕竟有遗忘曲线

计数案例
create-react-app redux-test

cd redux-est

npm run start

运行成功,开始改造

新版本默认变成如下的了，不习惯可以改成class

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <div>ssss</div>
    </div>
  );
}

export default App;
函数定义组件 与 类组件的区别
  • 1.函数式组件不会被实例化，整体渲染性能得到提升

函数式组件被精简成一个 render 方法的函数，所以它没有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。同时的，函数式组件本身是没有 this 的，所以在使用 Ref 等模块时与类组件也会有所区别。

  • 2.函数式组件没有状态

函数式组件本身没有自己的内部状态 state，数据依赖于 props 的传入，所以它又称无状态组件。

  • 3.函数式组件无访问生命周期的方法

函数式组件是不需要组件生命周期管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。

v1.0 不用redux
import React from 'react';
import './App.css';

export default class App extends React.Component {

    state = {
      count:0
    }
    constructor(props) {
      super(props)
      this.numberRef = React.createRef()
    }
    increment = ()=>{
        const number = this.numberRef.current.value*1
        this.setState(state => ({count:state.count + number}))
    }
    decrement = ()=>{
      const number = this.numberRef.current.value*1
      this.setState(state => ({count:state.count - number}))
    }
    incrementIfOdd = ()=>{
      const number = this.numberRef.current.value*1
      if(this.state.count % 2 === 1){
        this.setState(state => ({count:state.count + number}))
      }
    }
    incrementAsync = ()=>{
      const number = this.numberRef.current.value*1
      setTimeout(()=>{
        this.setState(state => ({count:state.count + number}))
      },1000)
    }
    render(){
      const count = this.state.count
      return(
        <div>
          <p>click {count} times</p>
          <div>
              <select ref={this.numberRef}>
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
              </select>&nbsp;&nbsp;
              <button onClick={this.increment}>+</button>&nbsp;&nbsp;
              <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
              <button onClick={this.incrementIfOdd}>incrementIfOdd</button>&nbsp;&nbsp;
              <button onClick={this.incrementAsync}>incrementAsync</button>
          </div>
        </div>
      )
    }
}
v2.0 利用redux
store.getState()
store.dispath(action)
store.subscribe(render)

store挂载在App父组件上，props传递store值，分了几个模块文件
在这里插入图片描述

npm install redux -S

redux/store.js

import {createStore } from "redux"

import reducer from "./reducer"

export default createStore(reducer)

redux/reducer.js

// 根据当前store和指定的action返回一个新的store

import { INCREMENT,DECREMENT} from "./action-type"

export default function count(state = 1,action) { // state的默认值可以先声明一个默认对象再赋值，这里就一个值就先这样简单处理
    console.log(state,action)
    switch (action.type) {
        case INCREMENT:
            return state + action.data
        case DECREMENT:
            return state - action.data
        default:
            return state;
    }
}

redux/action-type.js

/**
 * action type  统一定义，防止后续其他地方使用写错
 */

 export const INCREMENT = "increment"

 export const DECREMENT = "decrement"

redux/actions.js

/**
 * action creators   
 */

 import { INCREMENT,DECREMENT} from "./action-type"

 export const increment = (number) => ({type:INCREMENT,data:number})

 export const decrement = (number) => ({type:DECREMENT,data:number})

App.js

import React from 'react';
import PropTypes from 'prop-types'; 

import { increment,decrement } from "./redux/actions"
 
export default class App extends React.Component {
    static propTypes = {
      store:PropTypes.object.isRequired
    }

    state = {
      count:0
    }
    constructor(props) {
      super(props)
      this.numberRef = React.createRef()
    }
    increment = ()=>{
        const number = this.numberRef.current.value*1
       // this.props.store.dispatch({type:'INCREMENT',data:number}) // 不建议这样写,单独建一个actions文件
       this.props.store.dispatch(increment(number))
    }
    decrement = ()=>{
      const number = this.numberRef.current.value*1
      this.props.store.dispatch(decrement(number))
    }
    incrementIfOdd = ()=>{
      const number = this.numberRef.current.value*1
      if(this.props.store.getState() % 2 === 1){
        this.props.store.dispatch(increment(number))
      }
    }
    incrementAsync = ()=>{
      const number = this.numberRef.current.value*1
      setTimeout(()=>{
        this.props.store.dispatch(increment(number))
      },1000)
    }
    render(){
      const count = this.props.store.getState()
      return(
        <div>
          <p>click {count} times</p>
          <div>
              <select ref={this.numberRef}>
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
              </select>&nbsp;&nbsp;
              <button onClick={this.increment}>+</button>&nbsp;&nbsp;
              <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
              <button onClick={this.incrementIfOdd}>incrementIfOdd</button>&nbsp;&nbsp;
              <button onClick={this.incrementAsync}>incrementAsync</button>
          </div>
        </div>
      )
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App'

import store from './redux/store'

ReactDOM.render(<App store={ store } />, document.getElementById('root'));
// state更新监听
store.subscribe(()=>{ // state内部发生变化，回调 重新渲染
    ReactDOM.render(<App store={ store } />, document.getElementById('root'));
})
react-redux
  • Provider
  • connect()

展示组件

负责组件应用的UI层面，也就是如何渲染，具有很强的内聚性，不关心渲染的数据是如何取到的

容器组件

负责应用的逻辑处理，比如发送网络请求，处理返回数据，将处理好的数据传递给展示组件等

<Provider store = {store}> //自动subscribe

connect(
	state => ({})
	{action1,action2} // 返回的还是dispatch()
)(UI组件)
v3.1 react-redux

重新新建文件夹Counter,App，单独测试,redux文件不变
在这里插入图片描述
Counter.jsx

/**
 * ui组件
 */

import React from 'react';
import PropTypes from 'prop-types'; 

export default class Counter extends React.Component {
    static propTypes = {
      count:PropTypes.number.isRequired,
      increment: PropTypes.func.isRequired,
      decrement: PropTypes.func.isRequired,
    }

    state = {
      count:0
    }
    constructor(props) {
      super(props)
      this.numberRef = React.createRef()
    }
    increment = ()=>{
        const number = this.numberRef.current.value*1
        this.props.increment(number)
    }
    decrement = ()=>{
      const number = this.numberRef.current.value*1
      this.props.decrement(number)
    }
    incrementIfOdd = ()=>{
      const number = this.numberRef.current.value*1
      if(this.props.count % 2 === 1){
        this.props.increment(number)
      }
    }
    incrementAsync = ()=>{
      const number = this.numberRef.current.value*1
      setTimeout(()=>{
        this.props.increment(number)
      },1000)
    }
    render(){
      const count = this.props.count
      return(
        <div>
          <p>click {count} times</p>
          <div>
              <select ref={this.numberRef}>
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
              </select>&nbsp;&nbsp;
              <button onClick={this.increment}>+</button>&nbsp;&nbsp;
              <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
              <button onClick={this.incrementIfOdd}>incrementIfOdd</button>&nbsp;&nbsp;
              <button onClick={this.incrementAsync}>incrementAsync</button>
          </div>
        </div>
      )
    }
}

containers/App.js

import { connect } from "react-redux"

import Counter from "../components/Counter"

import { increment, decrement } from "../redux/actions"

/**
 * 容器组件 ，通过connect包装的UI组件(Counter)
 * 向UI组件传入特定的属性
 */

function mapStateToProps(state) {
    return {
        count: state
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increment: (number) => dispatch(increment(number)),
        decrement: (number) => dispatch(decrement(number))
    }

}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)

在起始位置的index.js改一下入口组件路径

import React from 'react';
import ReactDOM from 'react-dom';

import App from './containers/App' //修改

import store from './redux/store'

import { Provider } from 'react-redux'

ReactDOM.render(
    <Provider  store={ store } >
        <App/>
    </Provider>, 
document.getElementById('root'));
v3.2 react-redux

containers/App.js 其他跟v3.1一样不变

import { connect } from "react-redux"

import Counter from "../components/Counter"

import { increment, decrement } from "../redux/actions"

export default connect(
    state => ({count:state}),
    {increment,decrement}
)(Counter)
Posden
关注
专栏目录
react-redux
weixin_44478972的博客
12-14 204
更加接近react，跟React进行了一个深度的集成 好处： 要获取仓库中的值，不需要手动的调用 store.subscribe 注意点： 1、不再需要导入store，然后手动的监听我们仓库中值的改变了, 它会自动监听 2、store 中的代码不用变，React组件中的代码要改变 3、我们所有的获取仓库中的值和更改仓库中的值，都必须经过 组件的props，它其实是把获取仓库中的值和更改仓库中的值 挂载到 props【它跟react-router-dom很像】 步骤： https://react-redux.
React-Redux
麦子
12-06 798
一、Redux应用场景 1、随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难 2、Redux的出现就是为了解决state里的数据问题 3、在React中，数据在组件中是单向流动的 4、数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦 二、Redux设计思想 1、Redux是将整个应用状态存储到到一个地方，称为store 2、里面保存一棵状态树state tree 3、组件可.
React的上下文-Context
weixin_34186950的博客
01-02 143
开场白 19年的第一篇文章，虽然18年也没有分享多少，但是19年开始，我觉得要好好学习，好好努力。当然新的一年伊始，祝大家在19年平安、幸福，还有发发发。 导语 redux解决的核心问题是父子兄弟等组件件传值很麻烦的问题，于是有了一个"通讯班"--redux，这个通讯班可以帮我们把组件之间的状态整合到一起，然后修改也统一修改。我们觉得很nice。上一篇文章我简单的跟大家解读了redux的工作原理。...
React教程之Redux状态管理
非著名程序猿
06-01 989
Redux 虽然是react的一个状态管理库，可以单独使用，接下来我们详细讲解下底层代码。 废话不多讲，先说下基本的知识点。 Actions actions 是通过 store.dispatch(action)改变 state的唯一方法，不能直接通过 this.state = {} 来直接改变 state。 生成 actions 有两种方式： 1、单纯的 object const action...
React使用redux react-redux redux-thunk
lihaipi的博客
07-21 792
React redux [ˈriˌdʌks] 〇、预备 安装 npm install --save redux npm install --save react-redux(基础款用不上) npm install --save redux-thunk npm install --save-dev redux-devtools(不必要) 一、基础版 已经将reducer和actions抽出 1.仓库文件 // 1.创建仓库对象，解构必要的函数，并引入redux-thunk改装增强redux import {
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
react-redux-promise-example:使用react-redux和redux-promise的非常基本的示例
04-30
react-redux-promise-example 使用react-redux和redux-promise的非常基本的示例 To Start the Application Run server - go to server repo - run npm install - node index.js In main app - run npm install - ...
一篇文章介绍redux、react-redux、redux-saga总结
10-16
Redux是一个JavaScript库...总之，Redux提供了一种可预测的状态管理方式，React-Redux是Redux与React结合的桥梁，而Redux-Saga是处理异步逻辑的利器。三者一起工作可以构建出数据流清晰、异步逻辑可控的复杂React应用。
react-typescript-redux-saga:React Redux Redux-Saga打字稿样板
05-14
在IT行业中，React、Redux、Redux-Saga以及TypeScript是构建高效、可维护的前端应用的重要工具。这个名为"react-typescript-redux-saga"的项目是利用这些技术创建的一个样板应用，旨在帮助开发者快速搭建一个具备渐...
ts-redux-toolkit:TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router
04-04
ts-react-redux-toolkit TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router 还原 执照 新的BSD许可证
create-react-app webpack分离公共库 试试Dllplugin
没有翅膀的我们，只是随便认为不能飞而已
11-18 1656
前段时间，写了一篇关于vue-cli3 的 Dllplugin 链接，个人项目是react的，所以也想修改一下。代码大部分都是一样的。提倡不要改默认配置，就是不建议要npm run eject。可以类似vue.config.js一样新建文件配置最后覆盖。其实antd ui 按需加载就提供了一个思路 customize-cra。 在上面也是可以写配置文件。我以配置dllplugin为例。到时候可以自...
React router 4.x
没有翅膀的我们，只是随便认为不能飞而已
01-07 1213
React router 在gitHub上，学会找官方文档，看文档 安装 npm install react-router-dom --save 导入模块 import { BrowserRouter as Router, Route,Link } from &amp;amp;amp;amp;quot;react-router-dom&amp;amp;amp;amp;quot;; 导入文件，配置路由–基础 import React, { Component } from ...
仿疫情地图 React - Echarts 实时数据
没有翅膀的我们，只是随便认为不能飞而已
02-27 1014
看一下手机端疫情地图（按此仿写的） 项目实现 昨天某公开课上，老师是利用vue的，接口也是老师提供的。因为个人项目是React的，正好补充一下项目。直接上代码 安装echart依赖 npm install echarts-for-react echarts import React, { Component } from 'react'; import ReactEcharts from '...
React 项目优化
没有翅膀的我们，只是随便认为不能飞而已
11-06 684
Unsafe 生命周期 强迫症，就没办法了 componentWillMount → UNSAFE_componentWillMount componentWillReceiveProps → UNSAFE_componentWillReceiveProps componentWillUpdate → UNSAFE_componentWillUpdate cd your_project npx ...
React create-react-app css-moudle webpack4
没有翅膀的我们，只是随便认为不能飞而已
01-08 425
求助帖啊······ create-react-app一键生成项目 css样式冲突 想webpack.config,js 配置css-moudle的 webpack版本4 但不管怎么配，还是有问题 求大佬解答 地址：https://github.com/css-modules/css-modules ...
React 初识
没有翅膀的我们，只是随便认为不能飞而已
06-08 417
先接触的React Native,因为公司新项目需求需要。但React底层什么的一概不知，虽然有一点Vue的入门经验。所以想年前突击一下。望与前端各位，共同进步，早日爬坑。 工欲善其事 必先利其浏览器，node环境 学习一种语言，建议从官网入手，无味的话，也可以看看视频之类 库与框架 library(库) ...
React 高阶组件 HOC
没有翅膀的我们，只是随便认为不能飞而已
01-24 227
基本概念 在javascript中，高阶函数是以函数为参数，并返回值也是函数的函数。类似，高阶函数接受React组件作为参数，并且返回一个新的React组件。高阶组件本质上也是一个函数。 形式： const EnhancedComponent = heigherComponent(WrappedComponent) 使用场景 1. 操作props,添加，删除，修改 在被包装组件接受props前...
React 组件创建 生命周期 PropTypes
没有翅膀的我们，只是随便认为不能飞而已
01-07 200
组件 import React from 'react'; import ReactDOM from 'react-dom'; // 第一种创建组件，props可以是其他，形参，但这样语义化 // 首字母大写 function HelloWorld(props){ console.log(props) // props.name=&amp;amp;amp;amp;amp;quot;Li Mei&amp;amp;amp;amp;amp;quot; props只读，会报错
React 过渡 动画
没有翅膀的我们，只是随便认为不能飞而已
01-12 196
有关css的就不多说了，具体自己看文档。只是稍微在这里提个醒。 过渡 // transition 过度属性 transition:all 2s ease-in 动画 // forwards 保留动画最后一帧的效果 .hide{ animation: item-hide 2s ease-in forwards; } @keyframes item-hide { 0%{ opacit...
Redux、React-Redux与Redux-Saga精华总结
"redux、react-redux、redux-saga的总结" Redux是JavaScript应用程序的状态管理库，尤其常用于React应用。它提供了“可预测化的状态管理”机制，使得在大型项目中，管理和跟踪应用的状态变得简单而有序。Redux的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值