rwr-redux 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1630fa9a3b81dc6c3d2ec3c0addd9946d07a86a3
-  data.tar.gz: a05514f58e13b5c76d097ca240d81b60633b76a9
+  metadata.gz: d90aef2f8a8cd36bd034731da93afa59c6645f55
+  data.tar.gz: c41a41d679bf180cfd8c6e490c1b27bb393c9ebb
 SHA512:
-  metadata.gz: d69c3e0d715fbcb0da13f9e4dab1af464743c2f5cf8ef5b28c923bc3df6c903954668a3c211b51741097f9bfa98f77587a76a8e4c9b9302fa2747c14c374c405
-  data.tar.gz: 59432c4ff71dc67989c25cd6109053631b43ea3fd686b8dc4ee1557d98707a35305fd826e00232713f1ba20069d0d04743fd468608208802fc455937881b1523
+  metadata.gz: 15a686a3d097a50e7fd95f37784ee56be0e280f357c01d0dd2d373140de895a50f20357a7c1a1d00f7b988d57b40d6a76d3edc48edab1bfa831138862373a1e4
+  data.tar.gz: 1c6a123ac3b564d88e5fd8c146ea56a54a59d095a409a2094b1679dd01ed9dcb4818c4f10fa6670a5f9079cc5f196c5ad250a0ebdc8eb389eb69f5d4c223081e

data/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true
+  }
+}

data/.rubocop.yml

@@ -0,0 +1,4 @@
+Documentation:
+  Enabled: false
+Metrics/LineLength:
+  Max: 99

data/CHANGELOG.md

@@ -1 +1,16 @@
-## UNRELEASED
+## 0.2.0
+* add server side rendering
+* add redux-router helpers:
+  * js: `registerRouter`
+  * Rails: `redux_router`
+
+## 0.1.1 initial release
+
+* JS helpers:
+  * `registerStore`
+  * `registerContainer`
+
+
+* Rails helpers:
+  * `redux_store`
+  * `redux_container`

data/README.md

@@ -2,24 +2,39 @@ rwr-redux
 ====
 [Redux.js](http://redux.js.org/) integration plugin for [react_webpack_rails](https://github.com/netguru/react_webpack_rails).
 
-This integration allows to use redux state containers in a diffrent part of rails views.
+It allows you to use Redux state containers in a different part of Rails views. Thanks to this gem you can use multiple components (Redux containers) on one page. They can easily access the same store and have their state synced.
+
+#### Guides and Examples
+* basic react redux rails example: [app](https://github.com/caspg/rails-react-examples/tree/master/basic-redux)
+* how to use Redux and react-router in Rails app: [guide](https://github.com/netguru/rwr-redux/blob/master/docs/rails-redux-router.md) and [example](https://github.com/caspg/rails-react-examples/tree/master/redux-router).
+
 
 ## Setup
 * Add `rwr-redux` to your Gemfile:
 
-```
+```ruby
 gem 'rwr-redux'
 ```
 
-* Install rwr-redux package:
+* Install `rwr-redux` and `redux` packages:
 
 ```
-$ npm install --save rwr-redux
+$ npm install --save redux react-redux rwr-redux
 ```
 
 ## Usage
 
-### register store and components in react/index.js
+First of all, you have to register your store and containers in `react/index.js`. Then you can use them in a Rails view using provided helpers.
+When a page is loaded, your container component is wrapped with [`<Provider>`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store) component and will have access to defined store.
+
+
+### register integrations, store and components in `react/index.js`
+
+Register integrations:
+```js
+integrationsManager.register('redux-store', RWRRedux.storeIntegrationWrapper);
+integrationsManager.register('redux-container', RWRRedux.containerIntegrationWrapper);
+```
 
 Register store:
 
@@ -35,7 +50,17 @@ import Container from './containers/MyContainerName';
 RWRRedux.registerContainer('MyContainerName', Container);
 ```
 
-### use registered store and componetns in Rails view
+### store
+
+Registered store has to be a function which accepts **initial state** as an argument and returns store object:
+
+```js
+export default function configureStore(initialState) {
+  return createStore(rootReducer, initialState);
+}
+```
+
+### use registered store and components in Rails view
 
 Define store with initial state:
 
@@ -55,23 +80,65 @@ If you have more than one store in a view, you can specify `store_name`:
 <%= redux_container 'MyContainerName', store_name: 'MyStoreName' %>
 ```
 
-### using redux [DevTools](https://github.com/gaearon/redux-devtools)
+## Usage with react-redux-router
 
-**Use DevTools only in a development, below code has to be excluded in production.**
+If you want to use router in your redux app, you have to only create routes component. `rwr-redux` will wrap it with `<Router>` and `<Provider>`components, and also, will sync history with the store. Only `browserHistory` is supported.
 
-register in `react/index.js`:
+### example routes
+`app/react/routes/index.js`
 
 ```js
-import DevTools from './containers/DevTools';
-RWRRedux.registerContainer('DevTools', DevTools);
+export default (
+  <Route path="/" component={App}>
+    <Route path="about" component={About} />
+  </Route>
+)
 ```
 
-use in Rails view:
+### register integration and routes in `react/index.js`
+
+```js
+integrationsManager.register('redux-router', RWRRedux.routerIntegrationWrapper);
+```
+
+```js
+import RoutesName from './routes';
+RWRRedux.registerRoutes('RoutesName', RoutesName);
+```
+
+### use registered routes in Rails view
+
+Do not forget to use `redux_store` helper.
 
 ```erb
-<%= redux_container 'DevTools' %>
+<%= redux_store 'MyStoreName', { foo: @bar } %>
+
+<%= redux_router 'RoutesName' %>
 ```
 
+## Server Side Rendering
+
+More info how to use server side rendering with `react_webpack_rails`: [click](https://github.com/netguru/react_webpack_rails/blob/master/docs/server_side_rendering.md)
+
+Rails routes has to be properly setup:
+
+```rb
+get '/server_side/' => 'pages#server_side'
+get '/server_side/*path' => 'pages#server_side'
+```
+
+To enable server side rendering pass `server_side: true` to helpers options:
+
+```erb
+<%= redux_store 'MyStoreName', { foo: @bar }, server_side: true %>
+
+<%= redux_container 'MyContainerName', server_side: true %>
+
+<%= redux_router 'RoutesName', server_side: true %>
+```
+
+**NOTE**: `rwr-redux` automatically handles matching, redirecting and routing errors. Redirects and 404's are passed to Rails and handled there so you will be redirected or get 404 page like in normal Rails app.
+
 ## Contributing
 ## Issues
 

data/Rakefile

@@ -3,7 +3,7 @@ require 'rspec/core/rake_task'
 
 namespace :test do
   desc 'Run all tests'
-  task all: [:node, :gem] do
+  task all: [:node, :gem, :rails4] do
     puts 'Finished all tests, yay!'
   end
 
@@ -16,13 +16,27 @@ namespace :test do
   task :gem do
     sh %Q(bundle exec rspec spec/rwr-redux.rb)
   end
+
+  desc 'Run rspec for rails4 application'
+  task :rails4 do
+    Bundler.with_clean_env do
+      sh %Q(
+        cd spec/rails4_dummy_app &&
+        npm run build &&
+        npm run rwr-background-node &&
+        sleep 4 &&
+        bundle exec rspec &&
+        npm run rwr-stop-background-node
+      )
+    end
+  end
 end
 
 task default: 'test:all'
 
 namespace :setup do
   desc 'Prepare every environment'
-  task all: [:node, :gem] do
+  task all: [:node, :gem, :rails4] do
     puts 'Prepared all, yay!'
   end
 
@@ -35,4 +49,9 @@ namespace :setup do
   task :gem do
     sh %Q(bundle install)
   end
+
+  desc 'Prepare rails4 test app dependencies'
+  task :rails4 do
+    sh %Q(npm install && cd spec/rails4_dummy_app && npm install && bundle install)
+  end
 end

data/docs/rails-redux-router.md

@@ -0,0 +1,108 @@
+# react-router-redux in Rails app
+
+Adding multiple Redux components within Rails view is really easy thanks to [react_webpack_rails](https://github.com/netguru/react_webpack_rails) and [rwr-redux](https://github.com/netguru/rwr-redux).
+
+This guide shows how to do routing with `react-router` and how to sync state between components with Redux store using `react-router-redux`.
+Let's say you would like to have two components which shares the same store, navbar and main app component.
+
+If you want check the source code right away, you can find example app [here](https://github.com/caspg/rails-react-examples/tree/master/redux-router).
+
+## Setup
+
+* [react_webpack_rails](https://github.com/netguru/react_webpack_rails) and [rwr-redux](https://github.com/netguru/rwr-redux) have to be added and to your app
+* install react-router and react-router-redux:
+```bash
+$ npm install --save react-router react-router-redux
+```
+
+## Main app component
+
+In your root component add `<Router>` component and sync history with store.
+
+`react/containers/Root.jsx` [example](https://github.com/caspg/rails-react-examples/blob/master/redux-router/app/react/containers/Root.jsx)
+```jsx
+import React, { Component } from 'react';
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+import RWRRedux from 'rwr-redux';
+
+import App from './App';
+(...)
+
+export default class Root extends Component {
+  componentWillMount() {
+    const mountedStore = RWRRedux.getStore();
+    this.history = syncHistoryWithStore(browserHistory, mountedStore);
+  }
+
+  render() {
+    return (
+      <Router history={this.history} >
+        <Route path="/" component={App}>
+          (...)
+        </Route>
+      </Router>
+    );
+  }
+}
+```
+
+In `componentWillMount()` method, browserHistory is synced with [registered store](https://github.com/netguru/rwr-redux#register-store-and-components-in-reactindexjs). Store can be accessed by `getStore()` function provided by `rwr-redux` package.
+
+Within this component you can navigate with `<Link>` components ([example](https://github.com/caspg/rails-react-examples/blob/master/redux-router/app/react/components/TabItem.jsx#L11)).
+
+## Store
+
+Navbar component will issue [navigation events](https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions) via Redux actions. Those events will change state and cause main component to rerender.
+
+To make it works, you need to apply middleware to the store:
+`react/store/index.js`
+```jsx
+import { createStore, applyMiddleware } from 'redux';
+import { routerMiddleware } from 'react-router-redux'
+import { browserHistory } from 'react-router';
+
+import rootReducer from '../reducers';
+
+export default function configureStore(initialState) {
+  const middleware = routerMiddleware(browserHistory)
+
+  return createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(middleware)
+  );
+}
+```
+
+## Navbar component
+
+`react/containers/Navbar.jsx` [example](https://github.com/caspg/rails-react-examples/blob/master/redux-router/app/react/containers/Navbar.jsx#L15)
+
+Import `push` method from react-router-redux:
+```jsx
+import { push } from 'react-router-redux';
+```
+
+And now you can dispatch an action with navigation event:
+```jsx
+this.props.dispatch(push(path));
+```
+
+## Rails part
+
+Add wildcard route:
+
+`routes.rb`
+```ruby
+root 'home#index'
+get '/*path' => 'home#index'
+```
+
+Now you can use rails helpers in appropriate view:
+```erb
+<%= redux_store 'StoreName', { initial_state: @initial_state_from_controller } %>
+<%= redux_container 'Navbar' %>
+
+<%= redux_container 'MainApp' %>
+```

data/js/src/index.js

@@ -1,109 +1,22 @@
 import version from './version';
-
-import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { renderToString } from 'react-dom/server';
-import { Provider } from 'react-redux'
-
-import { isFunction, isReduxStore } from './utils/validators';
+import ReduxStore from './integrations/redux-store';
+import ReduxContainer from './integrations/redux-container';
+import ReduxRouter from './integrations/redux-router';
 
 class RWRRedux {
   constructor() {
     this.version = version;
-    this.registeredStores = {};
-    this.mountedStores = {};
-    this.defaultStore = null;
-    this.containers = {};
-
-    this.registerStore = this.registerStore.bind(this);
-    this.mountStore = this.mountStore.bind(this);
-    this.getStore = this.getStore.bind(this);
-    this.registerContainer = this.registerContainer.bind(this);
-    this.getContainer = this.getContainer.bind(this);
-    this.createContainer = this.createContainer.bind(this);
-    this.createRootComponent = this.createRootComponent.bind(this);
-    this.renderContainer = this.renderContainer.bind(this);
-    this.unmountContainer = this.unmountContainer.bind(this);
-    this.renderContainerToString = this.renderContainerToString.bind(this);
-  }
-
-  registerStore(name, store) {
-    isFunction(store, `Error when registering '${name}' store: must be a function.`);
-    this.registeredStores[name] = store;
-  }
-
-  mountStore(name, props) {
-    const store = this.registeredStores[name];
-    isFunction(store, `Error when mounting '${name}' store: must be a function.`);
-
-    const storeObject = store(props);
-    isReduxStore(storeObject, `Error when mounting '${name}' store: must be a valid Redux store.`);
-    this.mountedStores[name] = storeObject;
-    this.defaultStore = storeObject;
-  }
-
-  getStore(name) {
-    if (name) {
-      return this.mountedStores[name];
-    } else {
-      return this.defaultStore;
-    }
-  }
-
-  registerContainer(name, container) {
-    this.containers[name] = container;
-  }
-
-  getContainer(name) {
-    return this.containers[name];
-  }
-
-  createContainer(name) {
-    const constructor = this.getContainer(name);
-    return React.createElement(constructor);
-  }
-
-  createRootComponent(name, storeName) {
-    const container = this.createContainer(name);
-    return React.createElement(Provider, { store: this.getStore(storeName) }, container);
-  }
-
-  renderContainer(name, node, storeName) {
-    const rootComponent = this.createRootComponent(name, storeName);
-    render(rootComponent, node);
-  }
-
-  unmountContainer(node) {
-    unmountComponentAtNode(node);
-  }
-
-  renderContainerToString(name, storeName) {
-    const rootComponent = this.createRootComponent(name, storeName);
-    renderToString(rootComponent);
-  }
-
-  get storeIntegrationWrapper() {
-    return {
-      mount: function _mount(_, payload) {
-        this.mountStore(payload.name, payload.props);
-      }.bind(this)
-    }
-  }
 
-  get containerIntegrationWrapper() {
-    return {
-      mount: function _mount(node, payload) {
-        this.renderContainer(payload.name, node, payload.storeName);
-      }.bind(this),
+    this.registerStore = ReduxStore.registerStore;
+    this.mountStore = ReduxStore.mountStore;
+    this.getStore = ReduxStore.getStore;
+    this.storeIntegrationWrapper = ReduxStore.integrationWrapper;
 
-      unmount: function _unmount(node) {
-        this.unmountContainer(node);
-      }.bind(this),
+    this.registerContainer = ReduxContainer.registerContainer;
+    this.containerIntegrationWrapper = ReduxContainer.integrationWrapper;
 
-      nodeRun: function _prerender(payload) {
-        return this.renderContainerToString(payload.name);
-      }.bind(this)
-    }
+    this.registerRoutes = ReduxRouter.registerRoutes;
+    this.routerIntegrationWrapper = ReduxRouter.integrationWrapper;
   }
 }