lovee-redux


OverView

lovee-redux is a loader of webpack,it make developing react-redux project more rapidly!!By using some annotation like @model , @container, @action , @sync and @store,your can write less code to do more things!

note:you can find this example in directory examples,what you need to do is run node server.js

Example

Note that in lovee_redux,we use by annotations to tell lovee_redux how to generate redux codes,let's do it step by step

project directories:

• containers
  • test
    • index.js
• models
  • test
    • index.js
• store
  • index.js
• app.js
• dev.html
• webpack.config.js
• package.json

@model

File:models/test/index.js @model defines a data Model,just like below:

'use strict';
@model
class TestModel{
  constructor(){
    this.num = 0
  }
  onChange(num){
    this.num = num
  }
}

now we have a data model TestModel,let's go to define a @container!

@container [models...]

File:containers/test/index.js @container defines a ui component,used with @model

'use strict';
import React from 'react';
@container  TestModel
class Effect extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {num} = this.props.TestModel
    const {TestModel} = this.props.action
    return <div>
      <div>{num}</div>
      <div onClick={()=>{ 
        TestModel.onChange(new Date().getTime())
      }}>changeNum</div>
    </div>
  }
}

In this example,we inject TestModel into @container.After that,Effect can use num by this.props.TestModel,use onChangeInTestModel by this.props. Now,you may find it that,onChangeInTestModel is consist of onChange and InTestModel,onChange is method of TestModel,and InTestModel is added by lovee_redux. This can prevent duplication of method;

@store [models...] [middleware...]

File:store/index.js @store defines a single store In a porject

import TestModel from '../models/test/Test'
@store TestModel

TestModel will become a reducer in this store

app.js

File:store/index.js This is just like before

'use strict';
import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import store from 'store';
import Effect from 'containers/effect'
ReactDom.render(
  <Provider store={store}> 
    <Effect />
  </Provider>,
  document.getElementById('container')
);

webpack.config.js

The key point is to configure lovee_redux in loaders,it needs a parameter named models which can tell lovee_redux where Models are.

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
module.exports = { 
  context: path.resolve(__dirname),
  module: { loaders: [ 
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader:'react-hot!babel-loader!lovee_redux?models='+path.resolve(__dirname,'./src/models')
      }
    ] 
  },
  plugins: 
   [ 
     new HtmlWebpackPlugin({
        filename:'index.html',
        template:'./dev.html',
        inject:'body'
      }) 
    ],
  entry: 
   { 
     app: [ './src/app.js' ] },
  output: 
   { path: path.join(__dirname,'./build'),
     publicPath: '/',
     filename: '[name].js',
     chunkFilename: '[name].js' } 
 }