Redux 词汇,不巧你也不熟

在这里插入图片描述

1. 前言

    刚从 Vue+ElementUI 转来 React+BlueUI 着实有些被 React 前端数据流转给秀了;前端请求后端服务,服务响应返回数据,前端拿着数据渲染到 UI,这么简单的流程,到了 React 就被 action、reducer、store、和 state、props 数据传递给带进了胡同里。

2. Redux 词汇

2.1 Redux

    Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建⼀致化的应⽤,运⾏于不同的环境(客户端、服务器、原⽣应⽤)。Redux ⽀持 React、Angular、Ember、jQuery 甚⾄纯 JavaScript。
    Redux 所做的,在 reducer 中处理 action (包括对象复制及不可变更新),action 分发之后通知订阅者,订阅者根据 state 变化更新 UI 组件。

2.2 State (state tree)

    State 通常是指⼀个唯⼀的 state 值,由 store 管理且由 getState() ⽅法获得。它表示了 Redux 应⽤的全部状态,通常为⼀个多层嵌套的对象。数据类型无限制,支持存放任意数据类型的数据,但建议存放的数据支持序列化,Redux 将 State 数据转换 JSON 性能会更好。

// State 状态树
type State = any

eg: 初始化某模块 state 数据集。

const initialState = {
  data: [],
  appData:[],
  smsMonitorData:[],
  nodeData:{},
  analysisData:[],
  analysisTime:null,
  nodeInstata:[],
  smsBillData:null,
  smsAccountData:null,
  activityInstData:null,
  isSmsUnknownStatusFree:1,
  allNodeInstSendSmsInfo: {
	  sendSmsCount:null,
	  sendPeopleCount:null,
	  beforeSmsbillTime:0
  },
  itemList:[],//商品数据
  listLoading: false,
  //最热加购单品
  marketCart:{
    numIid:null,
    imgSrc:null,
    title:"",
    price:"--",
    uv:"--"
  },
  //最热收藏单品
  marketItem:{
    numIid:null,
    imgSrc:null,
    title:"",
    price:"--",
    uv:"--"
  }
};

2.3 Store

    store 就是⽤来维持应⽤所有的 state tree 的⼀个对象。改变 store 内 state 的唯⼀途径是对它 dispatch ⼀个 action
    准确的说整个应⽤的 state 被储存在⼀棵 object tree 中,并且这个 object tree 只存在于唯⼀⼀个 store 中。
    因为应⽤的构建发⽣于 reducer,所以⼀个 redux 应⽤中应当只有⼀个 store。

type Store = {
  dispatch: Dispatch
  getState: () => State
  subscribe: (listener: () => void) => () => void
  replaceReducer: (reducer: Reducer) => void
}

eg: {module}/store/index.js 某模块下store 文件夹下的 index.js

'use strict';

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

const createStoreWithMdware = applyMiddleware(
  thunkMiddleware
)(createStore);

export default createStoreWithMdware;

扩展

  • Middleware
        Middleware 是⼀个组合 dispatch function 的⾼阶函数,返回⼀个新的 dispatch function,通常将异步 actions 转换成 action.
        默认情况下, createStore() 所创建的 Redux store 没有使⽤ middleware,所以只⽀持 同步数据流。可以使⽤ applyMiddleware() 来增强 createStore() ,对于开发者来说可以⽤简便的⽅式来描述异步的 action。像 redux-thunk 或 redux-promise 这样⽀持异步的 middleware 都包装了 store 的 dispatch() ⽅法。
        middleware 提供的是位于 action 被发起之后,到达 reducer 之前的扩展点。 你可以利⽤ Redux middleware 来进⾏⽇志记录、创建崩溃报告、调⽤异步接⼝或者路由等等

2.4 Action

    action 是⼀个普通对象,action ⽤来表明要改变 state,而如何改变 state 由 reducer 所负责 。action 是将数据放⼊store 的唯⼀途径。
    action 必须拥有⼀个 type 域,它指明了需要被执⾏的 action type。Type 类型建议为 String 可以被序列化。

// Action 对象
type Action = Object

简单的action形式

{ type: 'ADD_TODO', text: 'Use Redux' }
{ type: 'REMOVE_TODO', id: 42 }
{ type: 'LOAD_ARTICLE', response: { ... } }

eg: {module}/actions/index.js 某模块下 action 定义

export const GET_FAILED = 'GET_FAILED';
export const GET_COUPON_SUCCESS = 'GET_COUPON_SUCCESS';
export const UPDATE_STATE_FAILED = 'UPDATE_STATE_FAILED';
export const GET_LIST_SUCCESS = 'GET_LIST_SUCCESS';
export const GET_LIST_FAILED = 'GET_LIST_FAILED';

export function deleteCouponActivityById(record, page, pageSize) {
  return (dispatch) => {
    ajax({
      api: 'deleteCouponActivityById',
      data: record
    }, (json) => {
      getModifyMarketingCouponActivityList(dispatch, {
          page: page,
          pageSize: pageSize
      });
    }, (json) => {
      dispatch({
        type: UPDATE_STATE_FAILED,
        data: json
      });
    });
  };
}
export function getCouponList(params) {
	return (dispatch) => {
		ajax({
			api: 'getCoupons',
			data: params
		}, (json) => {
			dispatch({
				type: GET_COUPON_SUCCESS,
				data: json.data
			});
		}, (json) => {
			dispatch({
				type: GET_FAILED,
				data: json
			});
		});
	}
}
function getModifyMarketingCouponActivityList(dispatch, params) {
  ajax({
    api: 'findCouponActivityListByPage',
    data: params
  }, (json) => {
    dispatch({
      type: GET_LIST_SUCCESS,
      data: json.data
    });
  }, (json) => {
    dispatch({
      type: GET_LIST_FAILED,
      data: json
    });
  });
}

2.5 dispatch (dispatch function)

    dispatch 函数是⼀个接收 action 或者异步 action,该函数可以往 store 分发⼀个或多个 action,也可以不分发任何 action。

// dispatch 函数
type Dispatch = (a: Action | AsyncAction) => any

    dispatch 一个 action 表明要改变 store 的 state

eg:{module}/containsers/{module-child}/index.jsx 某模块 index 页面删除某行记录

  onDelete=(record)=> {
    const { dispatch } = this.props;
    dialog.confirm('确定要删除该活动?',() => {
      dispatch(actions.deleteCouponActivityById(record, 1, 10))
    })
  }

2.6 Reducer (reducing function)

    Reducer 函数接受两个参数,之前累积运算的结果和当前被累积的值,返回的是⼀个新的累积结果。累计运算的结果是 state 对象,⽽被累积的值是 action,返回一个新的 state 对象。即 reducer 用来更新 state。
    简单来说就是,reducing function 接收当前 state 存放的数据集和 action获取的新数据,把两者归并后返回新的数据集。前后端交互时,后端响应的结果集就是在这里被存放到 store 的 state tree。

// Reducer 函数
type Reducer<S, A> = (state: S, action: A) => S

eg:reducers 文件夹下 index.js

// actions 是管理当前应用下 action 的文件
import * as actions from '../../actions';
const initialState = {
  activityData: []
};
const defaultAction = {
};
export default function index(state = initialState, action = defaultAction) {
  switch (action.type) {
    case actions.GET_LIST_SUCCESS:
      return Object.assign({}, state, {
        listLoading: false,
        activityData: action.data
      });
    case actions.UPDATE_STATE_FAILED:
      return Object.assign({}, state, {
        listLoading: false
      });
    default:
      return state;
  }
}

3. React 词汇

3.1 JSX

    JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。JSP简介:跳转React中文文档了解更多
    可以理解为页面,相当于网页中的 index.html,Java 的 index.jsp,.Net 的 index.asp,Vue 的 index.vue;

3.2 props

    props ,是从父组件向下传递给子组件的数据,数据只读。

3.3 state

    使用 state 来跟踪状态,组件中的一些数据在某些时刻发生变化时,state 及时的相应变更;记录状态便于其他组件或方法调用。
    state 和 props 的区别是 props 由父组件传入,而 state 由组件本身管理。props 只读,state 可读可写。
    和 Redux 的 State 是不同的;Redux 中的 State 概念更广,是整个 Store 的唯一 State Tree,细化来说指的是具体 Reducer 的数据。React 的 state 是组件级别的,概念很小,props 手伸的都比它长@_@。

3.4 伪代码

    如下是 MemberTemplate.jsx 模板下载弹窗文件主要代码结构,父级组件通过传递布尔值 show ,触发打开关闭弹窗;模板下载弹窗管理当前页面的状态,调用方式this.state.name,更新状态方式 this.setState({name, value})connect((state) => {})中的 State 是状态树的概念,管理当前 Reducer 的数据,调用方式 this.props.state.name
    不要在意这里 Dialog 内部为啥用的 Form 控件,因已删掉大部分逻辑,仅作演示 props state field radio 之间关联关系。

'use strict';
// 引入依赖和第三方控件
import React from 'react';
import {connect} from 'react-redux';
import {Form, Field, Button, Radio} from 'Blue';
// 初始化控件
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

export class MemberTemplate extends React.Component {
  /**
   * 构造函数
   * @param props 属性
   */
  constructor(props) {
    super(props);
    this.field = new Field(this, {
      onChange: (name, value) => {
        this.onChange(name, value);
      }
    });
  }

  // 全局状态,通过方法 this.setState(name, value) 更新状态
  state = {
    templateUrl: 'http://localhost:8080/template.csv'
  };
  // 监听方法
  onChange(name, value) {
    if (name === 'type' && value === '2') {
      this.setState({ templateUrl: 'https://localhost:8080/templatePhone.csv' })
    }
    if (name === 'type' && value === '1') {
      this.setState({ templateUrl: 'https://localhost:8080/template.csv' })
    }
  };
  // 生命周期方法
  componentWillReceiveProps(nextProp) {
    const { setValue } = this.field;
    setValue('type', '1');
  }

  render() {
    const {init} = this.field;
    const show = this.props.show;
    let title = '会员模板';
    const footer = (<div>
      <Button type="primary">确定</Button>
    </div>);
    return (<Dialog visible={show} style={{width: 480}} title={title} footer={footer}>
      <Form field={this.field}>
        <FormItem label="类型">
          <RadioGroup {...init('type')} >
            <Radio value="1">昵称</Radio>
            <Radio value="2">手机号</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="文件">
          <Button type="primary" shape="text" component="a" href={this.state.templateUrl}>模板下载</Button>
        </FormItem>
      </Form>
    </Dialog>);
  };
}

export default connect((state) => {
  // State Tree
  return {
    state
  };
})(MemberTemplate)

下一篇:React-Redux 数据流转详解
Power By niaonao, The End

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页