lovee_redux
comment parse
Last updated 3 years ago by sheweichun .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install lovee_redux 
SYNC missed versions from official npm registry.

lovee-redux

Build Status Coverage Status Gitter

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' } 
 }

Current Tags

  • 1.1.0                                ...           latest (3 years ago)

5 Versions

  • 1.1.0                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 2
Last Day 0
Last Week 0
Last Month 3
Dependencies (1)
Dev Dependencies (14)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |