本篇內(nèi)容介紹了“React新框架Mirror怎么使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)右玉,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

Mirror 是一款基于 React、Redux 和 react-router 的前端框架，簡潔高效、靈活可靠。

為什么？

我們熱愛 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'// ...// 在某個事件處理函數(shù)中dispatch(addTodo('a new todo'))// 在另一個事件處理函數(shù)中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
      })
    }
  }
})// ...// 在某個事件處理函數(shù)中actions.todos.add('a new todo')// 在另一個事件處理函數(shù)中actions.todos.complete(42)

是不是就簡單很多了？只需一個方法，即可定義所有的 action 和 reducer（以及 異步 action）。

而且，這行代碼：

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

完全等同于這行代碼：

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

完全不用關(guān)心具體的 action type，不用寫大量的重復代碼。簡潔，高效。

異步 action

上述代碼示例僅僅針對同步 action。

事實上，Mirror 對異步 action 的處理，也同樣簡單：

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

沒錯，這樣就定義了一個異步 action。上述代碼的效果等同于如下代碼：

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

調(diào)用 actions.todos.addSync 方法，則會 dispatch 一個 type 為 todos/addAsync 的 action。

你可能注意到了，處理這樣的 action，必須要借助于 middleware。不過你完全不用擔心，使用 Mirror 無須引入額外的 middleware，你只管定義 action/reducer，然后簡單地調(diào)用一個函數(shù)就行了。

更簡單的路由

Mirror 完全按照 react-router 4.x 的接口和方式定義路由，因此沒有任何新的學習成本。

更方便的是，Mirror 的 Router 組件，其 history 對象以及跟 Redux store 的聯(lián)結(jié)是自動處理過的，所以你完全不用關(guān)心它們，只需關(guān)心你自己的各個路由即可。

而且，手動更新路由也非常簡單，調(diào)用 actions.routing 對象上的方法即可更新。

理念

Mirror 的設(shè)計理念是，在盡可能地避免發(fā)明新的概念，并保持現(xiàn)有開發(fā)模式的前提下，減少重復勞動，提高開發(fā)效率。

Mirror 總共只提供了 4 個新的 API，其余僅有的幾個也都是已存在于 React/Redux/react-router 的接口，只不過做了封裝和強化。

所以，Mirror 并沒有“顛覆” React/Redux 開發(fā)流，只是簡化了接口調(diào)用，省去了樣板代碼：

在對路由的處理上，也是如此。

如何使用？

使用 create-react-app 創(chuàng)建一個新的 app：

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

創(chuàng)建之后，從 npm 安裝 Mirror：

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

“React新框架Mirror怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前題目：React新框架Mirror怎么使用-創(chuàng)新互聯(lián)
分享路徑：http://www.chinadenli.net/article42/pdgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站營銷、標簽優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站排名、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)