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 reduxibleAdd 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
- Universal Application Example..
- Single Page Application Example.
- Reduxible + Spring Boot Example.
- Reduxible + Spring Boot Universal Example.
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