Is the working process of the belt you know the story - actionreducerstore

文章目录

• redux
• • redux理解
  • redux是什么
  • 什么情况下需要使用redux
  • redux工作流程
  • redux的三个核心概念
  • • ??action
    • ??reducer
    • ??store
  • redux的核心API
  • • ??createstore()
    • ??store对象
    • ??applyMiddleware()
    • ??combineReducers()
  • 使用redux编写应用
  • • ??案例需求
    • ??原生react版写法

今天来学习下react中另一个重要的知识：redux及其工作流程和案例分析
感兴趣的小伙伴一起来看看吧~

redux

redux理解

英文文档：https://redux.js.org/

中文文档：https://www.redux.org.cn/

Github：https://github.com/reduxjs/redux

redux是什么

1. redux是一个专门用于做状态管理的JS库（不是react插件库）.
2. 它可以用在react,angular,vue等项目中,但基本与react配合使用.
3. 作用：集中式管理react应用中多个组件共享的状态.

什么情况下需要使用redux

1. 某个组件的状态,需要让其他组件可以随时拿到（共享）.
2. 一个组件需要改变另一个组件的状态（通信）.
3. 总体原则：能不用就不用,如果不用比较吃力才考虑使用.

redux工作流程

redux的三个核心概念

??action

1 动作的对象
2 包含2个属性

• type：标识属性,值为字符串,唯一,必要属性
• data：数据属性,值类型任意,可选属性

3 例子：{type：‘ADD_STUDENT’,data：{name：‘tom’,age：18} }

??reducer

1 用于初始化状态,加工状态.
2 加工时,根据旧的state和action,产生新的state的纯函数.

??store

1 将state、action、reducer联系在一起的对象
2 如何得到此对象？

• import {createStore} from ‘redux’
• import reducer from ‘./reducers’
• const store = createStore(reducer)

3 此对象的功能？

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

redux的核心API

??createstore()

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

??store对象

1. 作用：redux库最核心的管理对象
2. 它内部维护着：
   • state
   • reducer
3. 核心方法：
   • getState()
   • dispatch(action)
   • subscribe(listener)
4. 具体编码：
   • store.getState()
   • store.dispatch({type：‘INCREMENT’,number})
   • store.subscribe(render)

??applyMiddleware()

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

??combineReducers()

作用：合并多个reducer函数

使用redux编写应用

??案例需求

求和案例：

有五个按钮,下拉按钮选择加数,点击加号或减号按钮,将当前求和数与下拉选择的数进行运算,得到当前的求和数,“当前求和为奇数”按钮表示当前求和为奇数时进行加法运算,“异步加”按钮表示等待0.5s再进行加法运算

效果：

原生react版写法

Count组件 => index.jsx：

import React, { Component } from 'react'

export default class Count extends Component {

  state = {
    count: 0
  }

  // 加法
  increment = () => {
    // 获取用户输入
    const { value } = this.selectNumber
    // 读取原来的状态值
    const { count } = this.state
    this.setState({ count: count + value * 1 })
  }

  // 减法
  decrement = () => {
    // 获取用户输入
    const { value } = this.selectNumber
    // 读取原来的状态值
    const { count } = this.state
    this.setState({ count: count - value * 1 })
  }

  // 奇数再加
  incrementIfOdd = () => {
    // 获取用户输入
    const { value } = this.selectNumber
    // 读取原来的状态值
    const { count } = this.state
    if (count % 2 !== 0) {
      this.setState({ count: count + value * 1 })
    }
  }

  // 异步加
  incrementAsync = () => {
    // 获取用户输入
    const { value } = this.selectNumber
    // 读取原来的状态值
    const { count } = this.state
    setTimeout(() => {
      this.setState({ count: count + value * 1 })
    }, 500)
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <select ref={c => this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

接下来的一篇文章,我会运用redux来实现这个案例的效果~
包含了redux精简版,完整版和异步action版的写法~
感兴趣的小伙伴浅浅期待下吧

原创不易,还希望各位大佬支持一下 extcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

?? 点赞,你的认可是我创作的动力！ extcolor{green}{点赞,你的认可是我创作的动力！} 点赞,你的认可是我创作的动力！

收藏,你的青睐是我努力的方向！ extcolor{green}{收藏,你的青睐是我努力的方向！} 收藏,你的青睐是我努力的方向！

评论,你的意见是我进步的财富！ extcolor{green}{评论,你的意见是我进步的财富！} 评论,你的意见是我进步的财富！

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在.深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小.自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前.因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担.添加下方名片,即可获取全套学习资料哦