All Projects → lvhaohua → react-candee

lvhaohua / react-candee

Licence: MIT license
A react framework that encapsulates the redux.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-candee

isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-36.67%)
Mutual labels:  react-redux, react-router-redux, react-router-v4
React-Redux-Enterprise
A React-Redux boilerplate for enterprise/large scaled web applications
Stars: ✭ 77 (+156.67%)
Mutual labels:  react-redux, react-router-redux, react-router-v4
React Cloud Music
React 16.8打造精美音乐WebApp
Stars: ✭ 1,722 (+5640%)
Mutual labels:  react-redux, react-router-v4
Typescript Mern Starter
Build a real fullstack app (backend+website+mobile) in 100% Typescript
Stars: ✭ 154 (+413.33%)
Mutual labels:  react-redux, react-router-v4
react-router-v4-redux-ssr
Walkthrough for SSR with rr@v4 and rrr@v5
Stars: ✭ 58 (+93.33%)
Mutual labels:  react-router-redux, react-router-v4
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (+23.33%)
Mutual labels:  react-redux, react-router-v4
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (+93.33%)
Mutual labels:  react-redux, react-router-v4
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (+390%)
Mutual labels:  react-redux, react-router-v4
React Sight
Visualization tool for React, with support for Fiber, Router (v4), and Redux
Stars: ✭ 2,716 (+8953.33%)
Mutual labels:  react-redux, react-router-v4
rgxp
Regular Expression Collection (ReactJS, Redux, React Router, Recompose, NodeJS, Express)
Stars: ✭ 62 (+106.67%)
Mutual labels:  react-redux, react-router-v4
react-antd-admin
react-antd-admin 是一个后台集成解决方案,它基于 react 和 antd; 内置了动态路由,标签页缓存,权限验证、切换功能
Stars: ✭ 42 (+40%)
Mutual labels:  react-redux, react-router-v4
Reactspa
combination of react teconology stack
Stars: ✭ 911 (+2936.67%)
Mutual labels:  react-redux, react-router-v4
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+2850%)
Mutual labels:  react-redux, react-router-v4
Webpack React
👍👏react入门,抛砖引玉
Stars: ✭ 79 (+163.33%)
Mutual labels:  react-redux, react-router-v4
Manager
The Linode Cloud Manager
Stars: ✭ 543 (+1710%)
Mutual labels:  react-redux, react-router-v4
React Social Network
Simple React Social Network
Stars: ✭ 409 (+1263.33%)
Mutual labels:  react-redux, react-router-v4
cerebro-web
Website for Cerebro
Stars: ✭ 21 (-30%)
Mutual labels:  react-redux, react-router-v4
react-zhufengapp
这是珠峰培训react课程前端页面
Stars: ✭ 11 (-63.33%)
Mutual labels:  react-redux, react-router-redux
React Blog
personal blog design by react
Stars: ✭ 170 (+466.67%)
Mutual labels:  react-redux, react-router-v4
iwish
I wish that too!
Stars: ✭ 19 (-36.67%)
Mutual labels:  react-redux, react-router-v4

react-candee

A react framework that encapsulates the redux.

API Introduction

1.defaults

// initial config
import candee from 'candee';

candee.defaults({
  initialState: '',
  reducers: {},
  addEffects: (effects)=>{},
  middlewares: [],
  historyMode: '', // hash browser memory
})

2.render

// render API encapsulates the redux provider and createStore
import { render } from 'candee';
import App from './views/App';
//render 
render(<App />, document.getElementById('root'));

3.model

// 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);
    }
  }
};
// inject model
import candee from 'candee';
import someModel from './models/someModel';

candee.model(someModel);

4.actions

// how to disptach 
import {actions} from 'candee';

actions.[modelName].[reducerName/effectName]
actions.routing.[push/go/...]

5.connect

// 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

import { Router, Route, Switch, Redirect } from 'candee';
export default () => (
    <Router>
      <Switch>
        <Route path="/user" component={...} />
        <Route path="/" component={...} />
        <Redirect to="/" />
      </Switch>
    </Router>
);

7.dynamic

  const routeConfig = {
    model: () => [import("./model/login"),import("./model/regist")],
    component: () => import("./routes/Login")
  };
  <Route path="/login" component={dynamic(routeConfig)} />
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].