https://github.com/lvhaohua/react-candee

A react framework that encapsulates the redux.
https://github.com/lvhaohua/react-candee

react react-redux react-router-redux react-router-v4 redux

Last synced: 5 days ago
JSON representation

A react framework that encapsulates the redux.

• Host: GitHub
• URL: https://github.com/lvhaohua/react-candee
• Owner: lvhaohua
• License: mit
• Created: 2018-05-23T14:47:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-12-05T15:18:38.000Z (almost 4 years ago)
• Last Synced: 2024-10-27T16:12:06.748Z (11 days ago)
• Topics: react, react-redux, react-router-redux, react-router-v4, redux
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 30
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-candee

A react framework that encapsulates the redux.

### API Introduction

#### 1.defaults

```js

// initial config

import candee from 'candee';

candee.defaults({

  initialState: '',

  reducers: {},

  addEffects: (effects)=>{},

  middlewares: [],

  historyMode: '', // hash browser memory

})

```

#### 2.render

```js

// render API encapsulates the redux provider and createStore

import { render } from 'candee';

import App from './views/App';

//render 

render(, document.getElementById('root'));

```

#### 3.model

```js

// model template someModel.js 

export default {

  name: 'someModel',

  initialState: {

    a: '',

    b: ''

  },

  reducers: {

    reducerA(state, data) {

      console.log(data);

      return state;

    }

  },

  effects: {

    async effectA(data, getState) {

     const newData =  await fetch('...');

     actions.someModel.reducerA(newData);

    }

  }

};

```

```js

// inject model

import candee from 'candee';

import someModel from './models/someModel';

candee.model(someModel);

```

#### 4.actions

```js

// how to disptach 

import {actions} from 'candee';

actions.[modelName].[reducerName/effectName]

actions.routing.[push/go/...]

```

#### 5.connect

```js

// App.jsx

import React, { Component } from 'react';

import { connect } from 'candee';

class App extends Component {

  componentDidMount(){

    actions.someModel.reducerA(data);

  }

  // render(){...}

}

export default connect((state) => {

  return {

    states: state.someModel

  };

})(App);

```

#### 6.Router

```js

import { Router, Route, Switch, Redirect } from 'candee';

export default () => (

    

      

        

        

        

      

    

);

```

#### 7.dynamic

```js

  const routeConfig = {

    model: () => [import("./model/login"),import("./model/regist")],

    component: () => import("./routes/Login")

  };

  

```