alp-react-redux

14.3.1 • Public • Published

alp-react-redux

render with react and redux in alp framework

How to install

npm install --save koa@2 alp-react-redux

Examples

With Koa

import Koa from 'koa';
import reactredux from 'alp-react-redux';
import moduleDescriptor from './reduxApp';
 
const app = new Koa();
reactredux()(app);
 
// ...
 
(ctx) => {
    ctx.render(moduleDescriptor, data);
}

With Ibex

import Ibex from 'ibex';
import reactredux from 'alp-react-redux';
import moduleDescriptor from './reduxApp';
 
const const app = new Ibex();
reactredux({
    moduleDescriptor,
    initialData: window.__INITIAL_STATE__,
})(app);
 
 
// ...
 
(ctx) => {
    ctx.render(moduleDescriptor, data);
}

How it works

alp-react-redux render react components.

It add in Koa's context (or Ibex's context) the following method:

render(moduleDescriptor, data)

moduleDescriptor is an object with two properties: View and optional reducer. If the reducer is not set, the view is rendered as a simple component. data is an object with the initial data, sent to redux as the initial data for the store, or to react simple component as properties

For browser, this package keeps a single redux store, and reinitialize it each time the render method is called.

createAction / createReducer

Reduce some boilerplate in your application:

import { createAction, createReducer } from 'alp-react-redux';
 
 
export const increment = createAction('INCREMENT');
export const addTodo = createAction('ADD_TODO'); // addTodo({ name: 'Todo Name' })
export const removeTodo = createAction('REMOVE_TODO', ['id']); // removeTodo(todo.id)
 
export default createReducer(() => [], {
    [addTodo]: (todos, todo) => [...todos, todo],
    [removeTodo]: (state, { id }) => todos.filter(todo => todo.id !== id),
});

Readme

Keywords

Package Sidebar

Install

npm i alp-react-redux

Weekly Downloads

2

Version

14.3.1

License

ISC

Unpacked Size

728 kB

Total Files

58

Last publish

Collaborators

  • churpeau