React-Mirror

React-Mirror

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

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

安装Mirror

$ npm i --save mirror

使用

import React from 'react'
import mirror, { actions, connect, render } from 'mirrorx'

// 声明 Redux state, reducer 和 action，
// 所有的 action 都会以相同名称赋值到全局的 actions 对象上，actions.[name]即可取到所有的action
mirror.model({
    name: 'app',//相当于reducerName
    initialState: 0,//初始化state
    reducers: {//reducer事件处理，这里省略了action的type，type为[name]/[methodName]
        increment(state) { return state + 1 },
        decrement(state) { return state - 1 }
    },
    effects: {//异步方法声明,异步操作需要在完成后再调用reducers定义的同步方法才能进行页面渲染
        async incrementAsync() {
            await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, 1000)
            })
            actions.app.increment()//actions会自动dispatch对应的action
        }
    }
})

const App = (props) => {//组件定义
    return (
        <div>
            <h1>{props.count}h1>
            {/* 调用 actions 上的方法来 dispatch action */}
            <button onClick={() => actions.app.decrement()} style={{margin:"5px"}}>-button>
            <button onClick={() => actions.app.increment()} style={{margin:"5px"}}>+button>
            {/* dispatch async action */}
            <button onClick={() => actions.app.incrementAsync()} style={{margin:"5px"}}>+ Asyncbutton>
        div>
    )
}



export default connect((state) => {//连接组件和状态管理
    return {
        count: state.app
    }
})(App)

Mirror API

Mirror只封装了4个新的api，分别是：

状态管理

mirror.model({name, initialState, reducers, effects}):创建reducer和action，并作用于store。

mirror.hook((action, getState) => {}):用于监视dispatch出去的action。相当于store.subscribe(lister)。

mirror.defaults({

    initialState:undefined,//初始化状态

    historyMode:browser,//history对象类型

    middlewares:[],//第三方插件

    addEffect:(effects) => (name, handler) => { effects[name] = handler }//自定义异步如何处理

})

路由管理

actions.routing:管理Router相关内容。它是一个对象，提供了如下5个方法来手动更新location：

• push(location) - 往 history 中添加一条记录，并跳转到目标 location。
• replace(location) - 替换 hisotry 中当前 location。
• go - 往前或者往后跳转 history 中的 location。
• goForward - 往前跳转一条 location 记录，等价于 go(1)。
• goBack - 往后跳转一条 location 记录，等价于 go(-1)。

当location更新后，会有一个action.type=@@router/LOCATION_CHANGE的action被dispatch出去。我们可以监视它的操作。

渲染启动

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]):连接store和React

render([component], [container], [callback]):封装了ReactDOM.render，他会先创建store再进行渲染页面

效果图