dingdang

1.0.5 • Public • Published

dingdang

npm version

  • 简化Redux、React。
  • 尽可能的避免营造全新的概念。
  • 上手简单

一分钟快速上手

//一站式引入
import {actions, connect, createModel, React, render} from "dingdang";

//创建model
createModel({
    name: 'test',
    state: {
        message: 'hello world'
    },
    reducer: {
        onChangeMessageToChina: (state, action) => {
            const {payload: {newMessage}} = action;
            return {...state, message: newMessage}
        }
    },
    effect: {}
})

//组件
class Hello extends React.Component {


    render() {

        const {message, onChangeMessageToChina} = this.props

        return (
            <div>
                <h1>{message}</h1>
                <button onClick={onChangeMessageToChina}>中文</button>
            </div>
        )
    }

}

//连接
const App = connect(
    function (store) {
        return store.test;
    },
    function (dispatch) {
        return {
            onChangeMessageToChina: () => dispatch(actions.test.onChangeMessageToChina({newMessage: "你好,世界!"}))
        }
    }
)(Hello)

//启动
render(
    <App/>,
    document.querySelector("#app")
)

事例项目

Readme

Keywords

none

Package Sidebar

Install

npm i dingdang

Weekly Downloads

1

Version

1.0.5

License

ISC

Last publish

Collaborators

  • yuany