Awesome

This project is not maintained anymore. Try to use Next.js which is Awesome framework for building Fullstack React.js Apps.

Reduxible

The Quick and Easy way to make React + Redux Applications

Universal (Isomorphic) Hot-Loadable and Pluggable(by middleware) Framework for React and Redux applications. Reduxible can make it easy to get started to build React and Redux based Web Application and make it able to focus on business codes. Reduxible is based on react-redux-universal-hot-example and inspired by Fluxible.

Why Reduxible?

Make Universal Application Easily with React + Redux

React, Redux and other related assets are already good enough to use directly. But some people (like me) just want to focus on application codes and don't want to spend time on building and maintaining the structure of the project. So I've wrapped and integrated mandatory libraries for React + Redux Application. If you use Reduxible, only what you need to do is code and set Router, Middleware, Reducers, and React Components to Reduxible. Then, you can run & see the React + Redux App immediately. Also, it can be a Universal App or Single Page App by config.

We Need Long-Term Framework!

The environment of React and Redux has been changed very quickly almost every day. There are also a ton of related libraries and APIs changing frequently. But for building real products, we need stable and verified stuff. Reduxible provides useful modules having many references to make a universal application with React and Redux. And they are peer dependencies, so you can update them for the minor update. Reduxible will provide fixed APIs by wrapping the modules and will not be updated, except in a case of critical bugs. Therefore, you can only focus on building your own business features for your application without concerning or modifying integration codes of the application. Reduxible will provide Long-Term Services for React + Redux application that even can be run in the Internet Explorer 8! (I really really hate it, but for many reason, lots of people have to support it.)

Getting Started

Installation

$ npm install --save reduxible

Add Dependencies

Reduxible has peer dependencies so that you need to add below dependencies to your project and its versions should be equal or higher. Currently, Reduxible supports express only for server-side.

  "dependencies": {
      "history": "^1.17.0",
      "react": "^0.14.7",
      "react-dom": "^0.14.7",
      "react-redux": "^4.0.6",
      "react-router": "^1.0.3",
      "redux": "^3.0.6",
      "redux-simple-router": "^1.0.2"
    }

Make The React + Redux Application

`app.js`

import Reduxible from 'reduxible';
import ...

const reduxible = new Reduxible({
      server: true, //if run in the server, true
      development: true, //if development environment, true
      universal: true, //if universal application, true
      container: Html, //React Component Class to make <html></html> document.
      errorContainer: Error, //React Component Class will render when error occured.
      devTools: //Redux Dev Tools Component
      routes, //React Router Routes Configuration
      middlewares, //List of Redux Middlewares
      reducers, //Combined Redux Reducers
      reloader, //Reloader function to excuted when reducers are changed
      initialActions, //List of Redux Action to Reduced Before Render
      extras: extras //Extras to provide to container
});


//in the server
server.use(reduxible.server()); //Add to Connect or Express as middleware.

//in the client
reduxible.client(
	initialState, //InitialState to initialize the redux.
	container, //A container to mount a client element
	callback //A callback function to called after render
);

`todoService.js`

import { createAction, createReducer } from 'reduxible';

export const action = createAction('todo', {
  ADD_TODO: (todo) => {
    return {
      payload: {
        todo
      },
      helper: true
    };
  }
});

export default createReducer({todos: []},[
  {
    types: [action.type('ADD_TODO')],
    reduce: (payload, state) => {
      const { todo } = payload;
      const todos = [...state.todos, todo];
      return {
        ...state,
        todos
      };
    }
  },
  ...
]);

`reducers.js`

import { combineRouteReducers }  from 'reduxible';
import todo from './todoService';

export default combineRouteReducers({
  todo
})

`Todo.jsx`

import { action } from './todoService';
...

@connect(state => { todos: state.todo.todos },{ updateTodo : action('UPDATE_TODO') })
class Todo extend Component {
...
}

Examples

Browser Compatibility


Latest ✔	Latest ✔	Latest ✔	Latest ✔	8+ ✔

License

This software is free to use under the Minkyu Cho. MIT license. See the LICENSE file for license text and copyright information.

Contributing

Please don't hesitate to send a small pull-request or just leave anything you want as an issue.

Fork it!
Create your feature branch: git checkout -b feature/my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin feature/my-new-feature
Submit a pull request :D