Shulou(Shulou.com)06/02 Report--

Mirror is a front-end framework based on React, Redux and react-router, which is simple, efficient, flexible and reliable.

Why?

We love React and Redux. However, it is frustrating that there are too many boilerplate files in Redux, which requires a lot of repetitive work, not to mention integrating react-router routing in actual React applications.

A typical React/Redux application looks like this:

Actions.jsexport 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}} copy code reducers.jsimport {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}} copy code Todos.jsimport {addTodo CompleteTodo} from'. / actions'//. / / dispatch (addTodo ('a new todo')) / / copy the code in dispatch (completeTodo (42)) in another event handler

Doesn't it look a little cumbersome? This still doesn't take into account the case of asynchronous action. If you want to deal with asynchronous action, you also need to introduce middleware (such as redux-thunk or redux-saga), so the code is even more tedious.

Rewrite Todos.jsimport mirror using 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') / / copy the code in another event handler actions.todos.complete (42) in one event handler

Isn't it a lot easier? All action and reducer (and asynchronous action) can be defined with just one method.

And this line of code:

Actions.todos.add ('a new todo') copy the code

Exactly the same as this line of code:

Dispatch ({type: 'todos/add', text:' a new todo'}) copy the code

You don't have to worry about the specific action type at all and you don't have to write a lot of repetitive code. Simple and efficient.

Asynchronous action

The above code example is only for synchronous action.

In fact, Mirror's handling of asynchronous action is just as simple:

Mirror.model ({/ / omit the aforementioned code effects: {async addAsync (data, getState) {const res = await Promise.resolve (data) / / call the method dispatch a synchronous action actions.todos.add (res)} on `actions`) copy the code

Yes, this defines an asynchronous action. The effect of the above code is equivalent to the following code:

Actions.todos.addSync = (data, getState) = > {return dispatch ({type: 'todos/addAsync', data})} copy the code

If you call the actions.todos.addSync method, you will dispatch an action with a type of todos/addAsync.

You may have noticed that you have to rely on middleware to deal with such action. But you don't have to worry at all. You don't need to introduce additional middleware to use Mirror. You just define action/reducer and simply call a function.

Simpler routin

Mirror defines routes exactly according to the interfaces and methods of react-router 4.x, so there is no new learning cost.

More conveniently, the Router component of Mirror, its history objects and connections to Redux store are handled automatically, so you don't have to care about them at all, just care about your own routes.

Also, updating the route manually is very simple, which can be done by calling a method on the actions.routing object.

Idea

The design philosophy of Mirror is to reduce repetitive work and improve development efficiency on the premise of avoiding inventing new concepts and maintaining the existing development model as much as possible.

In total, Mirror provides only four new API, and the rest are already existing interfaces in React/Redux/react-router, but encapsulated and enhanced.

Therefore, Mirror does not "subvert" the React/Redux development flow, but simplifies interface calls and eliminates boilerplate code:

Cdn.xitu.io/2017/8/20/6351144f021a9076a4bd22341f328840?imageView2/0/w/1280/h/960/format/webp/ignore-error/1 ">

The same is true in the handling of routing.

How to use it?

Create a new app using create-react-app:

$npm I-g create-react-app$ create-react-app my-app copy code

After creation, install Mirror from npm:

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.