建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“React新框架Mirror怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
| Mirror 是一款基于 React、Redux 和 react-router 的前端框架，簡(jiǎn)潔高效、靈活可靠。 |
為什么？
我們熱愛 React 和 Redux。但是，Redux 中有太多的樣板文件，需要很多的重復(fù)勞動(dòng)，這一點(diǎn)令人沮喪；更別提在實(shí)際的 React 應(yīng)用中，還要集成 react-router 的路由了。
一個(gè)典型的 React/Redux 應(yīng)用看起來像下面這樣：
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'// ...// 在某個(gè)事件處理函數(shù)中dispatch(addTodo('a new todo'))// 在另一個(gè)事件處理函數(shù)中dispatch(completeTodo(42))看起來是不是有點(diǎn)繁冗？這還是沒考慮 異步 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
})
}
}
})// ...// 在某個(gè)事件處理函數(shù)中actions.todos.add('a new todo')// 在另一個(gè)事件處理函數(shù)中actions.todos.complete(42)是不是就簡(jiǎn)單很多了？只需一個(gè)方法，即可定義所有的 action 和 reducer（以及 異步 action）。
而且，這行代碼：
actions.todos.add('a new todo')完全等同于這行代碼：
dispatch({ type: 'todos/add', text: 'a new todo'})完全不用關(guān)心具體的 action type，不用寫大量的重復(fù)代碼。簡(jiǎn)潔，高效。
異步 action
上述代碼示例僅僅針對(duì)同步 action。
事實(shí)上，Mirror 對(duì)異步 action 的處理，也同樣簡(jiǎn)單：
mirror.model({ // 省略前述代碼
effects: { async addAsync(data, getState) { const res = await Promise.resolve(data) // 調(diào)用 `actions` 上的方法 dispatch 一個(gè)同步 action
actions.todos.add(res)
}
}
})沒錯(cuò)，這樣就定義了一個(gè)異步 action。上述代碼的效果等同于如下代碼：
actions.todos.addSync = (data, getState) => { return dispatch({ type: 'todos/addAsync',
data
})
}調(diào)用 actions.todos.addSync 方法，則會(huì) dispatch 一個(gè) type 為 todos/addAsync 的 action。
你可能注意到了，處理這樣的 action，必須要借助于 middleware。不過你完全不用擔(dān)心，使用 Mirror 無須引入額外的 middleware，你只管定義 action/reducer，然后簡(jiǎn)單地調(diào)用一個(gè)函數(shù)就行了。
更簡(jiǎn)單的路由
Mirror 完全按照 react-router 4.x 的接口和方式定義路由，因此沒有任何新的學(xué)習(xí)成本。
更方便的是，Mirror 的 Router 組件，其 history 對(duì)象以及跟 Redux store 的聯(lián)結(jié)是自動(dòng)處理過的，所以你完全不用關(guān)心它們，只需關(guān)心你自己的各個(gè)路由即可。
而且，手動(dòng)更新路由也非常簡(jiǎn)單，調(diào)用 actions.routing 對(duì)象上的方法即可更新。
理念
Mirror 的設(shè)計(jì)理念是，在盡可能地避免發(fā)明新的概念，并保持現(xiàn)有開發(fā)模式的前提下，減少重復(fù)勞動(dòng)，提高開發(fā)效率。
Mirror 總共只提供了 4 個(gè)新的 API，其余僅有的幾個(gè)也都是已存在于 React/Redux/react-router 的接口，只不過做了封裝和強(qiáng)化。
所以，Mirror 并沒有“顛覆” React/Redux 開發(fā)流，只是簡(jiǎn)化了接口調(diào)用，省去了樣板代碼：
在對(duì)路由的處理上，也是如此。
如何使用？
使用 create-react-app 創(chuàng)建一個(gè)新的 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)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
本文題目：React新框架Mirror怎么使用-創(chuàng)新互聯(lián)
路徑分享：http://www.dlmjj.cn/article/pdgec.html
