React 初探 [九] redux react-redux 基本使用与counter 案例

最新推荐文章于 2023-12-22 14:29:09 发布
最新推荐文章于 2023-12-22 14:29:09 发布
阅读量226 收藏
点赞数
分类专栏： react web 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sandy_zhi/article/details/108183364
版权

完整代码地址 https://gitee.com/xiaozhidayu/my-react

redux

redux 理解

1、学习文档

     1).英文文档: https://redux.js.org/

     2).中文文档: http://www.redux.org.cn/

     3).Github: https://github.com/reactjs/redux

2、redux 是什么？

      1). redux 是一个独立专门用于做状态管理的JS 库 （不是react 的插件库）

      2).他可以用在react angular vue 等项目中，但基本与react 配合使用

      3). 作用：集中管理react应用中多个组件共享的状态

3、redux 工作流程

4、什么情况下需要使用redux

     1)、总体原则，能不用就不用，如果不用 项目写起来比较吃力才用(！！！其实在实际项目开发中基本都需要用)

     2)、某个组件的状态需要共享

     3)、某个状态需要在任何地方都可以拿到

     4)、一个组件需要改变全局状态

     5)、一个组件需要改变另外一个组件的状态

redux 核心API

1、createStore()

      ①作用：创建包含指定reducer 的 store 对象

      ② 编码：

           import {createStore} from 'redux'

           import counter from './reducers/counter'

           const store = createStore(counter)

2、store 对象

     ① 作用：redux 库最核心的管理对象

     ② 它内部维护着 ： state      、   reducer 

     ③ 核心方法：getState()   、dispatch(action)、subscribe(listener)

     ④ 编码：store.getState()、 store.dispatch({type:'INCREMENT', number})、store.subscribe(render)

3、applyMiddleware

      ① 应用上基于redux 的中间件（插件库）

      ② 编码 ：

 import {createStore, applyMiddleware} from 'redux'

import thunk from 'redux-thunk'  // redux异步中间件

const store = createStore(

  counter,

  applyMiddleware(thunk) // 应用上异步中间件

)

4、combineReducers()

      ① 作用：合并多个reducer 函数

      ② 编码：

  export default combineReducers({
  user,
  chatUser,
  chat
})

redux 的三个核心概念

1、action

      ①标识要执行行为的对象

      ②包含两个方面的属性

          a、type:标识属性，值为字符串，唯一，必要属性

          b、xxx :数据属性，值类型任意，可选属性 (可统一xxx 为 data,方便统一取数据)

      ③ 例子 :

    const action = {
          type: 'INCREMENT',
          data: 2
      }

     ④ Action Creator(创建Action的工厂函数)

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

2、reducer

      ① 根据老的state 和 action ,产生新的state 的 纯函数

      ② 例子：

                  export default function counter(state = 0, action) {
                    switch (action.type) {
                      case 'INCREMENT':
                        return state + action.data
                      case 'DECREMENT':
                        return state - action.data
                      default:
                        return state
                    }
                  }

       ③注意：

            a、返回一个新的状态

            b、不要修改原来的状态

3、store

      ①、将state,action与reducer联系在一起的对象

      ②、如何得到此对象？

        import {createStore} from 'redux'
        import reducer from './reducers'
        const store = createStore(reducer)

     ③、此对象的功能？

          getState(): 得到state
           dispatch(action): 分发action, 触发reducer调用, 产生新的state
           subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

实践出真知 应用demo

// import React from 'react'
import React, { Component } from 'react'
import { INCREMENT, DECREMENT } from '../redux/action-types'
import * as actions from '../redux/actions.js'
import '../App.css'
class App extends Component {
  state = {
    count: 0,
  }
  increment = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count + number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    this.props.store.dispatch(actions.increment(number))
  }
  decrement = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1

    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count - number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    this.props.store.dispatch(actions.decrement(number))
  }
  incrementIfOdd = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态
    // const count = this.state.count
    const count = this.props.store.getState()
    //3、判断 满足条件才更新状态
    if (count % 2 == 1) {
      // this.setState({ count: count + number })
      this.props.store.dispatch(actions.increment(number))
    }
  }
  incrementAsync = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count
    //3、启动延时定时器 更新状态
    setTimeout(() => {
      // this.setState({ count: count + number })
      this.props.store.dispatch(actions.increment(number))
    }, 1000)
  }
  render() {
    // const { count } = this.state
    const count = this.props.store.getState()
    return (
      <div className="App">
        <p>click {count} times</p>
        <div>
          <select ref={(select) => (this.select = select)}>
            <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}>increment if odd</button>
          &nbsp;&nbsp;
          <button onClick={this.incrementAsync}>increment async</button>
        </div>
      </div>
    )
  }
}
// function App() {}

export default App

其他功能由 如下几个文件 分工完成

 

react-redux 

理解

redux 存在一些问题，因此应运而生了 react-redux

  1. redux与react组件的代码耦合度太高
  2. 编码不够简洁

1)    一个react插件库
2)    专门用来简化react应用中使用redux

react-redux 将所有组件分为两大类

1)    UI组件
       a.    只负责 UI 的呈现，不带有任何业务逻辑
       b.    通过props接收数据(一般数据和函数)
       c.    不使用任何 Redux 的 API
       d.    一般保存在components文件夹下
2)    容器组件
       a.    负责管理数据和业务逻辑，不负责UI的呈现
       b.    使用 Redux 的 API
       c.    一般保存在containers文件夹下

相关API

1)    Provider
让所有组件都可以得到state数据

<Provider store={store}>
    <App />
  </Provider>

2)    connect() :用于包装 UI 组件生成容器组件

import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)


3)    mapStateToprops(): 将外部的数据（即state对象）转换为UI组件的标签属性

  const mapStateToprops = function (state) {
   return {
     value: state
   }
  }


4)    mapDispatchToProps()
      将分发action的函数转换为UI组件的标签属性
      简洁语法可以直接指定为actions对象或包含多个action方法的对象

应用demo

模拟了项目中的组件封装，UI 组件 和 容器组件分别放在 component 和 containers 文件夹下，主要代码如下：

// import React from 'react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
// import { connect } from 'react-redux'
// import { INCREMENT, DECREMENT } from '../redux/action-types'
// import { increment, decrement } from '../redux/actions.js'
import '../App.css'

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

  // state = {
  //   count: 0,
  // }
  increment = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count + number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    // this.props.store.dispatch(actions.increment(number))
    this.props.increment(number)
  }
  decrement = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1

    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count - number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    // this.props.store.dispatch(actions.decrement(number))
    this.props.decrement(number)
  }
  incrementIfOdd = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态
    // const count = this.state.count
    // const count = this.props.store.getState()
    const count = this.props.count
    //3、判断 满足条件才更新状态
    if (count % 2 == 1) {
      // this.setState({ count: count + number })
      // this.props.store.dispatch(actions.increment(number))
      this.props.increment(number)
    }
  }
  incrementAsync = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count
    //3、启动延时定时器 更新状态
    setTimeout(() => {
      // this.setState({ count: count + number })
      // this.props.store.dispatch(actions.increment(number))
      this.props.increment(number)
    }, 1000)
  }
  render() {
    const { count } = this.props
    // const count = this.props.store.getState()
    return (
      <div className="App">
        <p>click {count} times</p>
        <div>
          <select ref={(select) => (this.select = select)}>
            <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}>increment if odd</button>
          &nbsp;&nbsp;
          <button onClick={this.incrementAsync}>increment async</button>
        </div>
      </div>
    )
  }
}
// function App() {}

// export default connect((state) => ({ count: state }), { increment, decrement })(
//   App,
// )

容器组件

import React from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../redux/actions'

import Counter from '../componments/Counter'

export default connect((state) => ({ count: state }), { increment, decrement })(
  Counter,
)

最后修改index.js 中引入的入口组件即可

redux 异步编程

1、下载redux 插件（异步中间件）

       npm install --save redux-thunk

2、代码中引入

3、将异步的操作放在action中，action 返回的是一个函数，在特定的时间才触发对应的事件

   action 中 代码 定时器模拟异步延时：

export const incrementAsync = (number) => {
    return dispatch => {
        // 1s 之后才去分发一个增加的action
        setTimeout(() => {
            dispatch(increment(number))
        }, 1000)
    }
}

相关重要知识  纯函数& 高阶函数

1、纯函数

1)    一类特别的函数: 只要是同样的输入，必定得到同样的输出
2)    必须遵守以下一些约束  
       a.    不得改写参数
       b.    不能调用系统 I/O 的API
       c.    能调用Date.now()或者Math.random()等不纯的方法  
3)    reducer函数必须是一个纯函数

2、高阶函数

1)    一类特别的函数: 只要是同样的输入，必定得到同样的输出
2)    必须遵守以下一些约束  
       a.    不得改写参数
       b.    不能调用系统 I/O 的API
       c.    能调用Date.now()或者Math.random()等不纯的方法  
3)    reducer函数必须是一个纯函数

小智大愚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React】使用react-redux编写counter应用
zqq_2016的博客
10-22 143
1. 下载依赖包 cnpm i --save react-redux 2. action-types.js /* * 包含所有的action type的常量字符串 */ export const INCREMENT = 'INCREMENT' export const DECREMENT = 'DECREMENT' 3. actions.js /* * 包含所有action creator */ import {DECREMENT, INCREMENT} from "./acti
Redux 例子分析： counter
博客已退休
01-15 448
本文内容来自 Facebook 官方Git Repo： counter 它所讲述的内容，是把 counter-vanilla中的例子和React结合在一起。 效果： 项目的目录结构： - components - Counter.js - Counter.spec.js - reducers - index.js - index.spec.js - in
（一）Redux:在计数器中(Counter)的使用
Jerry’s Blog
07-02 737
初入Redux（一） 摘要：Redux为了解决各种状态的在代码中离散 store接收（dispatch）一个事件（type），选择对应的响应（Action）,触发对视图的回调（注：必须订阅subscribe，才有回调） 请始终牢记！ 以Redux实现一个计数器（Counter）视图html组件依次是增加，减少，偶数加，异步加<p> Clicked: <span id="val
Redux与React环境准备、实现counter（及传参）、异步获取数据
最新发布
weixin_50236973的博客
12-22 947
Redux与React环境准备以及实现counter（及传参）
【React】简单使用redux编写counter应用（未优化前）
zqq_2016的博客
10-22 177
redux编写的应用主要的目录包括src/index.js、src/App.js、redux/action-types.js、redux/reducers.js. 注意：this.props.store.getState()与this.props.store.dispatch()的使用 1. 下载redux依赖包 cnpm i --save redux 2. action-types.js /* * 包含所有的action type的常量字符串 * */ export co...
counter-redux:使用react-redux的计数器应用
04-28
在压缩包文件"counter-redux-master"中，我们可以期待找到项目的源代码，包括React组件、Redux store的定义、actions和reducers，以及可能的测试文件。通过分析这些文件，我们可以了解到如何在React组件中触发...
react-redux-promise-example:使用react-redux和redux-promise的非常基本的示例
04-30
使用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 - npm start 当promise得到解决时...
react-redux-universal-hot-example：使用react，redux，express和feathers的通用Web应用程序的入门样板
02-05
React Redux Universal热门示例 关于 这是我使用以下技术组合而成的入门样板应用程序： 同构渲染 客户端和服务器都进行调用以从单独的API服务器加载数据 ， 和进行身份验证 适用于ES6和ES7魔术的 捆绑 的未来实现...
Simple-React-Redux-Example-Hello-World-Counter
05-18
标题中的“Simple-React-Redux-Example-Hello-World-Counter”表明这是一个关于React和Redux基本用法的示例项目，以一个简单的“Hello World”计数器为应用实例。这个例子将帮助开发者理解如何在实际开发中整合这两...
react-native-basekit:使用 react-native , redux, redux-sagas, react-navigation 的 react-native 项目的基本设置
08-04
React-Native-Basekit React-Native-Basekit 是初学者的项目结构。 入门 这些说明将为您提供一份项目副本，并在您的本地机器上运行，用于开发和测试目的。 先决条件 #! /bin/bash node@v10.x.x react-native-cli@...
Redux官网Counter最基本示例的思考
NON blog
01-03 512
1.不使用redux实现 如果不使用redux，仅仅依靠react去实现Counter功能是极其简单的。代码如下： index.js import React from 'react'; import ReactDOM from 'react-dom'; import Counter from './components/Counter'; const render = ()=&gt; Rea...
基于react、react-redux的加减计数器
taoweiquan0910的博客
03-09 4555
其实很早就已经解除react了，当时还看的是es5语法，本来js基础就不扎实，秉着初生牛犊不怕虎的精神去看了react，结果看了云里雾里，这种硬塞的知识过几天就全忘了，过了一段时间，想着有空了，就又去看了react，这次直接看的es6语法，看完后顺道看了react-redux，刚开始，很痛苦，本来react就已经不太容易理解了，再加上redux和react-redux，更加懵逼了，一个很简单的应用
React+Redux实现计数器
lishichengyan的博客
05-11 1879
复习练手用。先回顾一下redux是怎么工作的：无状态组件负责渲染以及用户交互（比如点击），它只有props。store的state通过容器组件注入到无状态组件，引起重新渲染，容器组件可以派发action，引起store的state改变。容器组件通过connect函数创建，connect是一个柯里化函数，第一、二个参数分别指定state如何被映射到无状态组件的props，以及要派发的动作如何映射到无...
React + Redux + React-Redux 实现计算案例
liujun2son
04-18 691
这个篇博客是对上一篇博客 React + Redux实现计算案例（优化） 的进一步优化。在上一篇博客中主要实现两个功能：1.容器组件 和 UI组件分离; 2.使用了Provider组件来提供context上下文。其实这两个功能已经有一个库帮我们实现了，这个库就是下面将要介绍的React-Redux这个库。 React + Redux实现计算案例（优化）这篇篇博客实现的原理与React-R...
28、react 使用 react-redux
大家好，我是+V
09-27 992
reac-redux 是一个 react 的插件库。作用是专门用来简化 react 应用中使用 redux。
实现前端页面局部转 pdf 及 打印 加分页防止内容截断
Sandy_zhi的博客
09-01 9361
再次强调实践出真知，新项目迭代涉及到一个管理报告的下载及打印，但是项目中以往的这种功能实现主要核心在后端，如pdf 的生成，打印也是有现成的文件地址等，但这次的报告中内容比较复杂，有表格，有几个echars 数据，以及长篇的描述，后端表示这个由后端生成pdf 不太现实，因此主要任务就留在了前端。 核心库 html2Canvas jspdf print-js 实现思路 1、html2Canvas可以将特定容器标签的内容转换为图片，通过特定API 转换为对应的base64 格式的数据 ...
Node 简单搭建服务器
Sandy_zhi的博客
07-18 5838
作为前端开发能自己动手搭建一个本地服务器真的太有必要了。使用 node 内置模块 和 express 框架 来动手搭建一个简单的服务吧。
自定义穿梭框实现详解 table 穿梭框
Sandy_zhi的博客
03-03 5162
业精于勤 荒于嬉 需求： element 的 穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了 思路： 封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式 A：什么样式？ Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了 A：展示的数据格式？ Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据， A : 其他逻辑功能分析？ Q：你需求的穿梭框需..
Echarts 类似进度条样式 Label 设置在柱状图的顶端外侧
Sandy_zhi的博客
11-03 3793
最近项目中写一个大屏演示，里面多数是Echars 图表，因为大多数都需要自己设置一些特性，才能达到效果，因此好好读了Echars 的文档，尤其是配置项。 效果图 思路 左图 其中左侧是看到的一篇文章 https://blog.csdn.net/qq_41619796/article/details/88661612，类似进度条的样式，思路是echars 两个部分叠加，但时看了我们项目的效果图不太可以，因为项目效果图整个有效数据和背景部分都是有圆角的，这样两部分的连接处就会有问题。 右图 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值