umi+dva使用心得

在umi中使用sass

umi天然支持less和css
如果想要使用sass，需要安装插件以及配置

1、安装umi的sass插件

yarn add @umijs/plugin-sass

2、安装sass依赖

yarn add sass-loader node-sass

3、在.umirc.ts中配置

  sass: {
    implementation: require('node-sass'),
  },

或者

sass: {}

经过上述步骤，我发现在引入.sass文件的时候还是会出现一个selint报错

在typings.d.ts文件中配置！！！

declare module '*.scss' {
  const content: any;
  export default content;
}

报错消失

---

layouts

约定 src/layouts/index.tsx 为全局路由。返回一个 React 组件，并通过 props.children 渲染子组件。

.
└── src
    ├── layouts
    │   └── index.tsx
    └── pages
        ├── index.tsx
        └── users.tsx

会生成路由

[
  { exact: false, path: '/', component: '@/layouts/index',
    routes: [
      { exact: true, path: '/', component: '@/pages/index' },
      { exact: true, path: '/users', component: '@/pages/users' },
    ],
  },
]

---

dva (redux)

dva = React-Router + Redux + Redux-saga

核心概念

• State：一个对象，保存整个应用状态
• View：React 组件构成的视图层
• Action：一个对象，描述事件
• connect 方法：一个函数，绑定 State 到 View
• dispatch 方法：一个函数，发送 Action 到 State

state 和 view

State 是储存数据的地方，收到 Action 以后，会更新数据。

View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

action

action描述UI层事件的一个 普通对象

{
  // 斜线前的名称表示namespace
  type: 'global/changeMenuActive',
  payload: {
    selectMenuName: type,
  },
}

connect

绑定state 到view

import { connect } from 'dva';

const mapStateToProps = (state) => {
  return { todos: state.todos };
}
connect(mapStateToProps)(App);

dispatch

把action发送给state

model示例

一
放入src/models/路径下的文件会自动识别 并为dva监管

import { Reducer } from 'redux';
import { Subscription, Effect } from 'dva';

export interface GlobalModelState {
  selectMenuName: number;
  initTag: boolean;
}

export interface GlobalModelType {
  namespace: 'global';
  state: GlobalModelState;
  effects: {
    changeMenuActive: Effect;
  };
  reducers: {
    setSelectMenuName: Reducer<GlobalModelState>;
    setInitTag: Reducer<GlobalModelState>;
  };
  subscriptions: { setup: Subscription };
}

const GlobalModel: GlobalModelType = {
  namespace: 'global',
  state: {
    selectMenuName: 0,
    initTag: true,
  },
  effects: {
    *changeMenuActive({ payload }, { put }) {
      const { selectMenuName } = payload;
      yield put({ type: 'setSelectMenuName', payload: { selectMenuName } });
    },
  },

  reducers: {
    setSelectMenuName(state, { payload }): GlobalModelState {
      return {
        ...state,
        selectMenuName: payload.selectMenuName,
      };
    },
    setInitTag(state, { payload }): GlobalModelState {
      return {
        ...state,
        initTag: payload.initTag,
      };
    },
  },

  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        let type: boolean;
        if (pathname.includes('equipment')) {
          type = false;
        } else {
          type = true;
        }

        dispatch({
          type: 'setInitTag',
          payload: {
            initTag: type,
          },
        });
      });
    },
  },
};

export default GlobalModel;

二

import { Effect } from 'dva';
import { Reducer } from 'redux';
import { getParkList } from '@/services';

export interface ParkData {
  id?: string;
  name?: string;
}

export interface StateType {
  parkList?: ParkData[];
}
export interface ParkModelType {
  namespace: string;
  state: StateType;
  effects: {
    getParkList: Effect;
  };
  reducers: {
    setParkList: Reducer<StateType>;
  };
}

const ParkModel: ParkModelType = {
  namespace: 'park',
  state: {
    parkList: [],
  },
  effects: {
    *getParkList(action, { call, put }) {
      const parkList = yield call(getParkList);
      if (parkList) {
        yield put({ type: 'setParkList', payload: { parkList } });
      }
    },
  },
  reducers: {
    setParkList(state, { payload: { parkList } }) {
      return { ...state, parkList };
    },
  },
};

export default ParkModel;

Model 对象的属性

• namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
• state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
• reducers: Action 处理器，处理同步动作，用来算出最新的 State
• effects：Action 处理器，处理异步动作

Reducer

Reducer 是 Action 处理器，用来处理同步操作，可以看做是 state 的计算器。它的作用是根据 Action，从上一个 State 算出当前 State。

Effect

Action 处理器，处理异步动作，基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程，计算以外的操作都属于 Effect，典型的就是 I/O 操作、数据库读写。

function *addAfter1Second(action, { put, call }) {
  yield call(delay, 1000);
  yield put({ type: 'add' });
}

Generator 函数

Effect 是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操作（不管是异步或同步）。

call 和 put

dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。

call：执行异步函数
put：发出一个 Action，类似于 dispatch

---