react dva 使用models存储

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。

global.js

// 管理状态
export default {
  namespace: "global",
  state: {
    userInfo: {
      email: null,
      pwd: null,
      key: null,
    },
  },
  // 更新state状态
  /*
   *  effects:Action 处理器,处理异步动作,基于 Redux-saga 实现。
   *    Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。
   *    异步函数不可以直接修改state状态,需要通过reducer函数来修改
   */
  effects: {
    *setUserInfo({ payload }, { put }) {
      console.log("effects", payload);
      yield put({ type: "set_userinfo", payload });
    },
  },
  /*
    *  reducers: Reducer 是 Action 处理器,用来处理同步操作,
    设置用户信息
*/
  reducers: {
    set_userinfo(state, { payload }) {
      console.log("reducers");
      return { ...state, userInfo: payload };
    },
  },

  // 页面一刷新就会发送请示
  subscriptions: {},
};

index.js

app.model(require("./models/modules/global").default);

 

页面使用dispatch存储数据到models页面

import { connect } from "dva";
class Login extends Component {

 getLogin().then((res) => {
   this.props.dispatch({
              type: "global/setUserInfo",
              payload: users[0],
            })
            .then(() => {
              // 页面跳转
              this.props.history.push("/");
            });
        } else {
          Message.error("邮箱或密码错误, 请重新输入");
        }
})
}
//login页面与models/global.js页面连接

export default connect(({ global }) => ({ ...global }))(Login);

页面获取models中state中userInfo数据

  // 钩子函数
  componentDidMount() {
    console.log("获取global页面数据==>", this.props.userInfo);
  }
export default connect(({ global }) => ({ ...global }))(index);

如:index.js有多个models需要引入可以在router中使用

 model: [import("./models/modules/home.js")],

注:要结合dynamic使用

https://dvajs.com/api/#dva-dynamic

const RouteConfig = [
  {
    path: "/",
    component: () => import("./pages/IndexPage"),
    model: [import("./models/modules/home.js")],
    redirect: true,
}
]

 

<span style="font-size:24px;">前言</span><br /> <br /> <span style="font-size:18px;">如释重负,好用的技术就应该越来越简单</span><br /> React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。<br /> <br /> <span style="font-size:18px;">React 带来了方便也带来了迷茫</span><br /> 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。<br /> <br /> <span style="font-size:18px;">大型项目中模块化与功能解耦困难</span><br /> 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。<br /> <br /> <span style="font-size:18px;">React Hooks 真正开启前端模块化的金钥匙</span><br /> 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。<br />
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页