《React后台管理系统实战：九》Redux原理：小功能实现（一）

最新推荐文章于 2023-07-26 10:23:49 发布
最新推荐文章于 2023-07-26 10:23:49 发布
阅读量285 收藏 1
点赞数
分类专栏： 前端 # React 文章标签： redux原理和实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010132177/article/details/105198512
版权
前端 同时被 2 个专栏收录
133 篇文章 13 订阅
订阅专栏
React
49 篇文章 6 订阅
订阅专栏

前端常用：https://docschina.org/

1.redux基础

1.1 学习文档

  1. 英文文档: https://redux.js.org/
  2. 中文文档: https://cn.redux.js.org/
  3. Github: https://github.com/reactjs/redux

1.2. redux 是什么?

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

1.3. redux 工作流程

react流程
在这里插入图片描述

[ 问题 ]

在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题

[ 解决 ]

Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图。

Redux三大原则

  1. 唯一数据源
  2. 保持只读状态
  3. 数据改变只能通过纯函数来执行
1.唯一数据源:

整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中。

2.保持只读状态:

state是只读的，唯一改变state的方法就是触发action，action是一个用于描述以发生时间的普通对象。

3.数据改变只能通过纯函数来执行:

使用纯函数来执行修改，为了描述action如何改变state的，需要编写reducers。

1.4. 什么情况下需要使用 redux

  1. 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
  2. 某个组件的状态，需要共享
  3. 某个状态需要在任何地方都可以拿到
  4. 一个组件需要改变全局状态
  5. 一个组件需要改变另一个组件的状态

2. redux 的核心 API

2.1. createStore()

  1. 作用:创建包含指定 reducer 的 store 对象
  2. 编码:
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)

2.2. store 对象

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

2.3. applyMiddleware()

  1. 作用:
    应用上基于 redux 的中间件(插件库)
  2. 编码:
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk' // redux 异步中间件
const store = createStore(
counter,
applyMiddleware(thunk) // 应用上异步中间件
)

2.4. combineReducers()

  1. 作用: 合并多个 reducer 函数
  2. 编码:
export default combineReducers({
user,
chatUser,
chat
})

3. redux 的三个核心概念

3.1. action

  1. 标识要执行行为的对象
  2. 包含 2 个方面的属性
    a. type: 标识属性, 值为字符串, 唯一, 必要属性
    b. xxx: 数据属性, 值类型任意, 可选属性
  3. 例子:
const action = {
type: 'INCREMENT',
data: 2
}
  1. Action Creator(创建 Action 的工厂函数)
const increment = (number) => ({type: 'INCREMENT', data: number})

3.2. reducer

  1. 根据老的 state 和 action, 产生新的 state 的纯函数
  2. 样例
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
}
}
  1. 注意
    a. 返回一个新的状态
    b. 不要修改原来的状态

3.3. store

  1. 将 state,action 与 reducer 联系在一起的对象
  2. 如何得到此对象?
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
  1. 此对象的功能?
getState() : 得到 state
dispatch(action) : 分发 action, 触发 reducer 调用, 产生新的 state
subscribe(listener) : 注册监听, 当产生了新的 state 时, 自动调用

4. 安装 redux

1. 进入项目目录安装redux

cnpm install --save redux

5.react版本的状态使用实战

1.新建一个git 分支并切换进去

git checkout -b redux

2.把原src改成别的名字如src_app

3.新建一个src在里面写基础的index.js app.jsx

index.js

import React from 'react' 
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App/>,document.getElementById('root'))

未用redux实现的app.jsx

import React,{Component} from 'react'

export default class App extends Component{
    state = {
        count: 0
      }


    constructor(props) {
    super(props)
    this.numberRef = React.createRef() //【1】创建一个ref
    }


    //自加
    increment = () => {
        const number = this.numberRef.current.value * 1 //【3】引用ref处的当前值
        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>
                <select ref={this.numberRef}> {/**【2】使用ref */}
                    <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>
        )
    }
}

效果：http://localhost:3000/

  1. 自加
  2. 自减
  3. 是5处为奇数时才会加
  4. 过一秒再加（模拟异步）

在这里插入图片描述

6.redux版本的状态管理实战（一：读取）

1.复制一份src备份一下

2.在src下建一个文件夹和文件：redux/store.js

// redux最核心的管理对象: store
import {createStore} from 'redux'
import reducer from './reducer' //【1】导入reducer

export default createStore(reducer) // 【2】创建store对象内部会第一次调用reducer()得到初始状态值

3.新建文件：src/redux/reducer.js

// reducer函数模块: 根据当前state和指定action返回一个新的state

// 管理count状态数据的reducer
export default function count(state=1,action){ //state=1初始化state的值，
    console.log('count()的state和action分别是：',state,action)  //看看都是些啥
    switch(action.type){
        case 'INCREMENT' :
            return state+action.data //data取决于action.js里的返回对象
        case 'DECREMENT':
            return state-action.data 
        default: 
        //都不是就默认就返回state【重点是在这里因为action还未写，上面两步case无效】
            return state
    }
}

4.到index.js

import React from 'react' 
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store' //【1】导入store

//【2】传store给App子组件
ReactDOM.render(<App store={store} />,document.getElementById('root'))

5.到App.js

【0】-【3】
注意：此时各函数都无法使用，因为它调用的还是之前的状态

import React,{Component} from 'react'
import PropTypes from 'prop-types' //【0】引入propTypes

export default class App extends Component{
    /*state = { //【1】关闭state
        count: 0
      }*/
    
    //【2】接收store--前一步转index.js传一个store过来
    static propTypes={
        store:PropTypes.object.isRequired
    }


    constructor(props) {
    super(props)
    this.numberRef = React.createRef() //创建一个ref
    }


    //自加
    increment = () => {
        const number = this.numberRef.current.value * 1 //引用ref处的当前值
        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(){
        //【3】得到store的状态，此时应该显示1
        const count = this.props.store.getState()
        return(
            <div>
                <p>click {count} times</p>
                <select ref={this.numberRef}> {/**使用ref */}
                    <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>
        )
    }
}

效果：此时的状态由reducer.js里state控制，变成1

控制台变：count()的state和action分别是： 1 {type: “@@redux/INITs.m.l.t.8”}
在这里插入图片描述

7.redux版本状态管理（二、操作state）

1.新建redux/action-types.js用于存放动作名变量防止写错

//包含n个action type常量名称的模块
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

2.新建actions.js用于存放动作

//【0】包含n个用来创建action的工厂函数(action creator)
import {INCREMENT, DECREMENT} from './action-types'

/*普通写法export function increment(number){
    return {type: INCREMENT, data: number}
}*/

//【1】增加的action
export const increment = number => ({type: INCREMENT, data: number}) //返回对象别忘记加括号
//【2】减少action
export const decrement = number => ({type: DECREMENT, data: number})

3.reducer.js（action实际存放处：用于操作状态）

// reducer函数模块: 根据当前state和指定action返回一个新的state
import {INCREMENT, DECREMENT} from './action-types'

// 管理count状态数据的reducer
export default function count(state=1,action){ //state=1初始化state的值，
    console.log('count()的state和action分别是：',state,action)  //看看都是些啥
    switch(action.type){
        case INCREMENT :
            return state + action.data //data取决于action.js里的返回对象
        case DECREMENT:
            return state - action.data 
        default:        //都不是就默认就返回state
            return state
    }
}

4. app.js修改各函数来操作状态（重点）

import React,{Component} from 'react'
import PropTypes from 'prop-types' //引入propTypes
import {increment,decrement} from './redux/actions' //引入动作

export default class App extends Component{
    
    //接收store--前一步转index.js传一个store过来
    static propTypes={
        store:PropTypes.object.isRequired
    }


    constructor(props) {
      super(props)
      this.numberRef = React.createRef() //创建一个ref
    }


    //自加 increment
    increment = () => {
        const number = this.numberRef.current.value * 1 //引用ref处的当前值
        // this.setState(state => ({count: state.count + number}))
        this.props.store.dispatch(increment(number))  //【1】改变状态也可写成这样，但正常是单独写个动作放acions.js里 dispatch({type:'INCREMENT',data:number})
    }

    //自减
    decrement = () => {
        const number = this.numberRef.current.value * 1
        this.props.store.dispatch(decrement(number)) //【2】同上
      }
    
      //如果当前是奇数就进行自加
      incrementIfOdd = () => {
        const number = this.numberRef.current.value * 1
        if (this.props.store.getState() % 2 === 1) {
          this.props.store.dispatch(increment(number)) //【3】同上
        }
    
      }

      //异步自加，此处用隔一秒加模拟异步
      incrementAsync = () => {
        const number = this.numberRef.current.value * 1
        setTimeout(() => {
          this.props.store.dispatch(increment(number)) //【4】同上
        }, 1000)
      }

    render(){
        //得到store的状态，此时应该显示1
        const count = this.props.store.getState()
        return(
            <div>
                <p>click {count} times</p>
                <select ref={this.numberRef}> {/**使用ref */}
                    <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>
        )
    }
}

5.index.js添加监听store内部的状态数据发生改变时回调

import React from 'react' 
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store' //导入store

//传store给App子组件
ReactDOM.render(<App store={store} />,document.getElementById('root'))

//【1】给store绑定状态更新的监听
store.subscribe(() => { // store内部的状态数据发生改变时回调
    // 重新渲染App组件标签
    ReactDOM.render(<App store={store} />, document.getElementById('root'))
})

6.store.js(附)

// redux最核心的管理对象: store，
import {createStore} from 'redux'
import reducer from './reducer' //【1】导入reducer

export default createStore(reducer) // 【2】创建store对象内部会第一次调用reducer()得到初始状态值

7.效果：同5.3，控制台输出：

在这里插入图片描述

count()的state和action分别是： 1 {type: "@@redux/INITq.p.n.h.i"}
reducer.js:6 count()的state和action分别是： 1 {type: "increment", data: 1}
reducer.js:6 count()的state和action分别是： 2 {type: "increment", data: 1}
reducer.js:6 count()的state和action分别是： 3 {type: "increment", data: 1}
reducer.js:6 count()的state和action分别是： 4 {type: "increment", data: 1}
reducer.js:6 count()的state和action分别是： 5 {type: "increment", data: 1}
reducer.js:6 count()的state和action分别是： 6 {type: "decrement", data: 1}
reducer.js:6 count()的state和action分别是： 5 {type: "increment", data: 1}

8.总结流程

在这里插入图片描述

深蓝冰河
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在react项目实战中使用Redux（案例讲解）
weixin_45745641的博客
04-05 2319
前言 上篇文章讲解了redux的基本使用方法，这篇文章通过小案例教大家如何在实际的react的项目中实现redux，加深对redux的理解和掌握，基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解（纯函数的概念） 项目中使用Redux 这里就新建项目然后使用redux完成一个小案例 首先新建项目然后删除掉冗余代码，之后在src文件夹下新建一个pages文件夹,在文件夹下新建一个alipay.js和wxpay.js,然后我们来实现一个这样的需求: 比如我们的微信和支付宝都绑定了同一张银行卡,当我
react-redux-form：使用Redux在React中轻松创建表单
02-05
React Redux Form是化简器创建者和动作创建者的集合，它们使使用React和Redux实现即使是最复杂和自定义的表单也变得简单而高效。 npm install react-redux-form@latest --save 安装# Dependencies (you probably ...
React实战篇——四、在React中使用Redux
sxww_zyt的博客
12-08 191
四、在React中使用Redux 1，Redux可以和很多库一起用，为了方便在React中使用Redux，我们需要单独安装react-redux 2，展示组件和容器组件 展示组件负责应用的UI展示，也就是组件如何渲染，具有很强的内聚性。展示组建不关心渲染时使用的数据是如何获取到的，它只要知道有了这些数据后，组件应该如何渲染就足够了。 容器组件负责应用逻辑的处理，如发送网络请求、处理返回数据，将处...
React实战篇——三、Redux简介及其主要组成
sxww_zyt的博客
11-03 134
三、Redux简介及其主要组成 1，简介 Redux应用需要遵循三大原则，否则程序很容易出现难以察觉的问题。 　　①唯一数据源 　　Redux只维护一个全局的状态对象，存储在Redux的store中。唯一数据源是一种集中式管理应用状态的方式，便于监控任意时刻应用的状态和调试应用，减少出错的可能性。 　　②保持应用状态只读 　　在任何时候都不能直接修改应用状态。当需要修改应用状态时，必须发送一个a...
react-redux实操与浅谈
sakura的博客
05-05 376
react-redux实操与浅谈
React+Redux项目实战——简书2
DAIJZ12138的博客
08-27 292
1.什么是路由，如何在React中使用路由功能 根据URL的不同显示不同内容。 2.在home首页中各部分组件初次加载时所用到的数据，统一在home首页index.js中用ajax获取。 3.home下的index.js里面的Home组件是一个UI组件（只有render），应该将其他逻辑操作放到他处（比如，ajax请求）。 4.home下的每个子组件几乎都用connect与store进行了...
react+antd+redux实现的一个超全后台管理系统
10-12
该后台管理系统模板参照了vue-element-admin进行开发，包含动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
react-redux-counter:React Redux计数器应用程序的实现
05-18
计数器应用程序的简单react-redux实现 运行：npm run start
react-web-admin:React后台管理系统
03-11
react-web-admin React后台管理系统
react-todolist:react+redux实现todolist功能
05-16
利用vue和react分别实现toDoList简易功能。参考。 Vue.js 、、。 启动 # initial directory vue init webpack my-project # install dependencies npm install # serve with hot reload at localhost:8080 npm run ...
react入门之旅12——redux之案例实战（redux简单版本）
qq_41470573的博客
07-14 202
第一版 直接在非redux版本上进行改造，为做变动。 index import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from "./redux/store"; ReactDOM.render(<App/>,document.getElementById('root')) store.subscribe(()=>{ React
Redux框架之createStore()用法讲解
热门推荐
风华绝代的博客
03-25 1万+
createStore() createStore(reducer, [initialState], enhancer) 创建一个 Redux store 来以存放应用中所有的 state。 应用中应有且仅有一个 store。 参数 reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state ...
Redux---createStore方法的实现
qq_45780855的博客
03-22 682
实现Redux中的createStore方法
vuex使用详解
seimeii的博客
08-08 819
vuex使用详解
Redux源码之createStore
最新发布
Nuhsuil的博客
07-26 191
本文会按照 createStore 的源码，由上至下分别从参数、内部定义的变量、getState、subScribe订阅、dispatch派发、replaceReducer 替换 reducer 几个方面进行介绍。关于combineReducers applyMiddleware 的源码在有进行说明。
vue之vuex
过客如期的博客
05-27 1774
一，前言 1.Vuex是专门为Vue设计的状态管理库，集中管理所有组件的状态。并与相应的规则保证状态以一种可预测的方式发生变化。 2.Vuex解决了多个组件共享状态时，传参方式繁琐，代码维护困难的问题。 二，Vuex入口 1.Vuex的入口是store，同时store也是Vuex核心概念，像一个容器仓库集中管理了所有组件的state。 2.在Vuex4中，我们使用createStore 初始化一个store，createStore接受一个对象作为参数，对象中定义了组件的state和改变state的规则 im
react-redux 的使用 （偏实战）
北芒的博客
07-15 222
前景提要 需要使用 provider 将 store 数据给 容器组件 需要使用 connect()用于连接容器组件和UI组件 本文是在你已经将 store 骨架搭建完毕的情况下进行的 -----没有可点击此处参考 UI组件 只负责 UI 的呈现，不带有任何业务逻辑 没有状态（即不使用this.state这个变量） 所有数据都由参数（this.props）提供 不使用任何 Redux 的 API 容器组件 负责管理数据和业务逻辑，不负责 UI 的呈现 带有内部状态 使用 Redux 的 API.
react-redux实战完美案例
qq_36262295的博客
02-06 533
store 对象 action 发通知 reducer 执行者 import { createStore } from 'redux'; import { Provider } from 'react-redux'; const store = createStore(reducer); //包裹根组件 //provider相当于把store挂载到了所有组件上了 ReactDOM.render( <Provider store={store}> <Routes />
我是如何使用React+Redux构建大型应用的
强子的专栏
01-12 5744
背景 我们团队有个项目由于开发时间较长，且是前后端杂糅的开发方式，维护成本很高，在线上暴露的问题很多。而且因为对接了公司一百多条产品线，每天都会接到大量的客诉和产品线反馈的问题。2017年11月份以产品为主导，从产品层面对流程进行重新设计，对该项目进行了前后端的重构。作为前端的负责人我用这篇文章分享下，整个过程从技术选型，开发，上线的一些经验。 技术选型的思考 首先我们先看下下面我们项目
使用react实现后台管理系统
05-26
要使用React实现后台管理系统，可以按照以下步骤进行： 1. 创建React项目：使用create-react-app或者其他方式创建一个React项目。 2. 安装相关依赖：一般后台管理系统需要使用到UI组件库、路由、状态管理等，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值