良许Linux教程网 干货合集 简单讲解一下React:mirror

简单讲解一下React:mirror

mirror是阿里巴巴团队提供的一个开源框架。其主要作用是简化React、Redux开发的步骤。

传统的React-Redux开发,需要逐步定义action、reducer、component等相关东西,看起来比较冗长。mirror框架将这些操作进一步封装,使之使用起来更加简单。

image-20220122214316267

为什么?

我们热爱 React 和 Redux。但是,Redux 中有太多的样板文件,需要很多的重复劳动,这一点令人沮丧;更别提在实际的 React 应用中,还要集成 react-router 的路由了。

一个典型的 React/Redux 应用看起来像下面这样:

actions.js
export const ADD_TODO = 'todos/add'export const COMPLETE_TODO = 'todos/complete'export function addTodo(text) {  return {    type: ADD_TODO,
   text
 }
}export function completeTodo(id) {  return {    type: COMPLETE_TODO,
   id
 }
}
reducers.js
import { ADD_TODO, COMPLETE_TODO } from './actions'let nextId = 0export default function todos(state = [], action) {  switch (action.type) {    case ADD_TODO:      return [...state, {text: action.text, id: nextId++}]    case COMPLETE_TODO:      return state.map(todo => {        if (todo.id === action.id) todo.completed = true
       return todo
     })    default:      return state
 }
}
Todos.js
import { addTodo, completeTodo } from './actions'// ...// 在某个事件处理函数中dispatch(addTodo('a new todo'))// 在另一个事件处理函数中dispatch(completeTodo(42))

看起来是不是有点繁冗?这还是没考虑 异步 action 的情况呢。如果要处理异步 action,还需要引入 middleware(比如 redux-thunk 或者 redux-saga),那么代码就更繁琐了。

使用 Mirror 重写

Todos.js
import mirror, { actions } from 'mirrorx'let nextId = 0mirror.model({  name: 'todos',  initialState: [],  reducers: {
   add(state, text) {      return [...state, {text, id: nextId++}]
   },
   complete(state, id) {      return state.map(todo => {        if (todo.id === id) todo.completed = true
       return todo
     })
   }
 }
})// ...// 在某个事件处理函数中actions.todos.add('a new todo')// 在另一个事件处理函数中actions.todos.complete(42)

是不是就简单很多了?只需一个方法,即可定义所有的 action 和 reducer(以及 异步 action)。

而且,这行代码:

actions.todos.add('a new todo')

完全等同于这行代码:

dispatch({  type'todos/add',  text: 'a new todo'})

完全不用关心具体的 action type,不用写大量的重复代码。简洁,高效。

异步 action

上述代码示例仅仅针对同步 action。

事实上,Mirror 对异步 action 的处理,也同样简单:

mirror.model({  // 省略前述代码
 effects: {    async addAsync(data, getState) {      const res = await Promise.resolve(data)      // 调用 `actions` 上的方法 dispatch 一个同步 action
     actions.todos.add(res)
   }
 }
})

没错,这样就定义了一个异步 action。上述代码的效果等同于如下代码:

actions.todos.addSync = (data, getState) => {  return dispatch({    type'todos/addAsync',
   data
 })
}

调用 actions.todos.addSync 方法,则会 dispatch 一个 type 为 todos/addAsync 的 action。

你可能注意到了,处理这样的 action,必须要借助于 middleware。不过你完全不用担心,使用 Mirror 无须引入额外的 middleware,你只管定义 action/reducer,然后简单地调用一个函数就行了。

更简单的路由

Mirror 完全按照 react-router 4.x 的接口和方式定义路由,因此没有任何新的学习成本。

更方便的是,Mirror 的 Router 组件,其 history 对象以及跟 Redux store 的联结是自动处理过的,所以你完全不用关心它们,只需关心你自己的各个路由即可。

而且,手动更新路由也非常简单,调用 actions.routing 对象上的方法即可更新。

理念

Mirror 的设计理念是,在尽可能地避免发明新的概念,并保持现有开发模式的前提下,减少重复劳动,提高开发效率。

Mirror 总共只提供了 4 个新的 API,其余仅有的几个也都是已存在于 React/Redux/react-router 的接口,只不过做了封装和强化。

所以,Mirror 并没有“颠覆” React/Redux 开发流,只是简化了接口调用,省去了样板代码:

在对路由的处理上,也是如此。

如何使用?

使用 create-react-app 创建一个新的 app:

$ npm i -g create-react-app
$ create-react-app my-app

创建之后,从 npm 安装 Mirror:

cd my-app
$ npm i --save mirrorx
$ npm start

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部