crm开发定制Redux——详解

一.初识

相当于vue中的vuex

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

看看Reduxcrm开发定制的工作原理图

crm开发定制如果要进行加一crm开发定制操作流程如下：

crm开发定制值得注意的是：Reducers不仅 可以进行加工状态，还可以进行初始化状态（undefinded）

二，核心概念

Store

在 redux 里面，只有一个Store，整个应用需要管理的数据都在这个Store里面。这个Store我们不能直接去改变，我们只能通过返回一个新的Store去更改它。redux提供了一个createStore来创建state

  1. import { createStore } from 'redux'
  2. const store = createStore(reducer)

action

这个 action 指的是视图层发起的一个操作，告诉Store 我们需要改变。比如用户点击了按钮，我们就要去请求列表，列表的数据就会变更。每个 action 必须有一个 type 属性，这表示 action 的名称，然后还可以有一个 payload 属性，这个属性可以带一些参数，用作 Store 变更：

  1. const action = {
  2.   type: 'ADD_ITEM',
  3.   payload: 'new item', // 可选属性
  4. }

上面这个例子就定义了一个名为ADD_ITEM的Action，它还携带了一个payload的参数。 Redux 可以用 Action Creator 批量来生成一些 Action。 

Reducer

在上面我们定义了一个Action,但是Action不会自己主动发出变更操作到Store，所以这里我们需要一个叫dispatch的东西，它专门用来发出action，不过还好，这个dispatch不需要我们自己定义和实现，redux已经帮我们写好了，在redux里面，store.dispatch()是 View发出 Action 的唯一方法。

  1. store.dispatch({
  2.   type: 'ADD_ITEM',
  3.   payload: 'new item', // 可选属性
  4. })

当 dispatch 发起了一个 action 之后，会到达 reducer，那么这个 reducer 用来干什么呢？顾名思义，这个reducer就是用来计算新的store的，reducer接收两个参数：当前的state和接收到的action，然后它经过计算，会返回一个新的state。(前面我们已经说过了，不能直接更改state，必须通过返回一个新的state来进行变更。)

  1. const reducer = function(prevState, action) {
  2.   ...
  3.   return newState;
  4. };

这个 reducer 是一个纯函数。纯函数的意思是说，对于相同的输入，只会有相同的输出，不会影响外部的值，也不会被外部的值所影响。纯函数属于的概念，如果你想了解更多纯函数的概念，请看

可以看到，我们在创建store的时候，我们在createStore里面传入了一个reducer参数，在这里，我们就是为了，每次store.dispatch发送一个新的action,redux都会自动调用reducer，返回新的state。

这里先看一个例子

实现一个计算功能

          

1.先创建一个Redux文件夹，分别创建store.js和reducers.js文件

store.js中

  1. //引入creacteStore,专门用于创建redux中最核心的store对象
  2. import { legacy_createStore as createStore } from "redux";
  3. //引入为Count组件服务的reducer
  4. import countRedux from './reducers'
  5. const store=createStore(countRedux)
  6. //暴露出去
  7. export default store

reducers.js文件中

这块代码参照上面的原理图

  1. //接收两个参数 之前的状态preState,和动作对象action
  2. //const init=0
  3. export default function countRedux(preState,action) {
  4.   // 从action对象中拿出：type,data
  5.   console.log(preState,action);
  6.   
  7.   const {type,data}=action
  8.   // 根据传进来的type判断要进行的操作
  9.   switch (type) {
  10.     // 如果类型是加，用传进来之前的值+action中的值，返回出去
  11.     case 'add1':
  12.       return preState+data
  13.      case 'add2':
  14.       return preState-data
  15.      
  16.     default:
  17.       //返回初始化数据
  18.      return 0
  19.   }
  20. }

在count.js中

store.getState()获取reducx中的返回值

 store.dispatch（）向redux中发送  第一个参数之前的值  第二个参数值action对象

store.subscribe()  当Redux状态变化时，强制更新rendar,让页面进行渲染

  1. import React, { Component } from 'react';
  2. // 引入状态
  3. import store from './redux/store.js'
  4. class count extends Component {
  5.    state={
  6.    
  7.     }
  8.     // 组件挂载时调用
  9.     componentDidMount(){
  10.       // 当Redux状态变化时，强制更新rendar,让页面进行渲染
  11.       store.subscribe(() => {
  12.         this.setState({})
  13.       })
  14.      
  15.     }
  16.     // 加法
  17.     add1=() => {
  18.       const {value}=this.select
  19.      store.dispatch({type:'add1',data:value*1})
  20.     
  21.     }
  22.     add2=() => {
  23.        const {value}=this.select
  24.       //console.log(typeof value)//string
  25.       store.dispatch({type:'add2',data:value*1})
  26.     }
  27.     add3=() => {
  28.        const {value}=this.select
  29.       //console.log(typeof value)//string
  30.       const count=store.getState() 
  31.       //string+number=string 所以要把string转number 
  32.       if(count%2!==0) {
  33.          store.dispatch({type:'add1',data:value*1})
  34.      }else{
  35.         alert('不符合奇数要求')
  36.       }
  37.     }
  38.     add4=() => {
  39.        const {value}=this.select
  40.       //console.log(typeof value)//string
  41.     
  42.       //string+number=string 所以要把string转number 
  43.       setInterval(()=>{
  44.        store.dispatch({type:'add1',data:value*1})
  45.       },2000) 
  46.      
  47.     }
  48.   render() {
  49.    
  50.     return (
  51.       <div>
  52.         {/* 获取状态 */}
  53.         <h4>{store.getState()}</h4>
  54.         <select ref={(c)=>{this.select=c}}>
  55.           <option value='1'>1</option>
  56.           <option value='2'>2</option>
  57.           <option value='3'>3</option>
  58.           <option value='4'>4</option>
  59.         </select>&nbsp;
  60.         <button onClick={this.add1}>+</button>&nbsp;
  61.         <button onClick={this.add2}>-</button>&nbsp;
  62.         <button onClick={this.add3}>当前求和为奇数再加</button>&nbsp;
  63.         <button onClick={this.add4}>异步加</button>
  64.       </div>
  65.     );
  66.   }
  67. }
  68.  
  69. export default count;

上面代码中生命周期钩子中的强制更新可以进行优化

在index.js入口文件中进行设置 

以上这种方式是简写方式，下面进行改造

观察原理图，上面那个我们忽略了action,下面我们创建action.js文件

 action.js

这里实现加减操作

  1. /**
  2.  * 专门为Count组件生成action对象
  3.  */
  4. // 加  箭头函数的简写模式
  5. export const ceactAdd1Action=data=>({type:'add1',data:data})
  6. //减法   常规模式
  7. export function ceactAdd2Action(data){
  8.   return {type:'add2',data:data}
  9. }

在count.js中进行修改

先进行导入

import {ceactAdd1Action,ceactAdd2Action} from './redux/action.js'

修改代码 

这里省略奇数相加，和异步加  

三.异步action

1.什么是异步action？

有了异步action，那肯定有同步action.一般情况   我们把对象（Object）形式叫做同步action

函数（function）形式称为异步action ,我们上面的例子action传入的是一个对象，他就是同步的

举个例子：

假如去食堂吃饭，1.你等上5min对服务员说上菜（就是上面例子实现异步的方式）

                              2.你告诉服务员五分钟后上菜，（这就是异步action）

2.什么时候用？

当你明确延时任务不想交给自身组件，想交给action时

3.怎么用？

安装中间件 配置在store中

yarn add redux-thunk

 在store.js中配置

在count.js中

  1. add4=() => {
  2.        const {value}=this.select
  3.       //console.log(typeof value)//string
  4.     
  5.       //string+number=string 所以要把string转number 
  6.      
  7.        store.dispatch(ceactAsyncAdd1Action(value*1,500))
  8.       
  9.      
  10.     }

 在action.js中

返回一个函数

  1. export const ceactAsyncAdd1Action=(data,time)=>{
  2.   // 返回函数异步action
  3.    return () => {
  4.      setTimeout(() => {
  5.       store.dispatch(ceactAdd1Action(data))
  6.      },time)
  7.    }
  8. }

四.react-rudex

后续会继续补充.........

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发