v1

README.md

@@ -94,7 +94,17 @@ export default combineReducers({
 })
 ```
 
-thats simpleset form of reducer and selectors
+## Selectors
+
+we recommend you follow example folder.
+
+- export default function from reducer.js file as your reducer
+- export named exports for selectors.
+- selectors you pass into provider has 2 cool features
+  - it automaticlly get store as first argument, so u dont have to pass store yourself everytime you use it
+  - avoid import hell !
+
+example folder contain simpleset form of reducer and selectors
 
 ## Actions
 

example/package.json

@@ -5,11 +5,12 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "babel-polyfill": "^6.26.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "react-pubflux": "link:.."
+    "react-pubflux": "link:..",
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/App.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 
 import { withFlux } from 'react-pubflux'
-import { LOGIN_START, LOGIN_END, ATTEMPT_LOGIN , CONFIG, CONFIG_RESET } from './sdk/events';
-
+import { LOGIN_START, LOGIN_END, ATTEMPT_LOGIN , LOGIN_RESET, CONFIG, CONFIG_RESET } from './sdk/events';
+import UserComponent from './UserComponent'
 class App extends Component {
 
+  state = {loading: null};
 
   componentDidMount(){
     const { listen } = this.props;
@@ -19,7 +20,10 @@ class App extends Component {
   }
 
   setConfig = () => {
-    this.props.emit(CONFIG, {value: Math.random()}, true) // 3rd param === true mean send this directly to reducer :)
+    // 3rd param === true mean send this directly to reducer :)
+    // i dont recommend this way because it will ignore all actions, yet it exsists for convience
+    // this will go --> rootReducer --> update store --> back
+    this.props.emit(CONFIG, {data:{randome: Math.random()}}, true)
   }
 
   clearConfig = () => {
@@ -28,20 +32,27 @@ class App extends Component {
 
   login = () => {
     this.props.emit(ATTEMPT_LOGIN, {
-      username:'demo'+ parseInt( Math.random()*100 ),
+      username:'demo',
       password:'demo'
     });
   }
 
+  resetAuth = () => this.props.emit(LOGIN_RESET)
+
   render () {
+    const {loading} = this.state
+    const ids = Object.keys(this.props.appUsers);
     return (
       <div>
-        <h1> Hello world </h1>
+        <h1> {loading === true ? 'Loading...' : loading === null ? 'Hello' : 'Finished'} </h1>
 
         <button onClick={this.login}> login :) </button>
+        <button onClick={this.resetAuth}> Clearn login </button>
         <button onClick={this.setConfig}> Set value to config directly without any actions </button>
         <button onClick={this.clearConfig}> reset config </button>
-
+        <ul>
+          {ids.map(id=><UserComponent id={id} key={id} />)}
+        </ul>
         <pre><code>{JSON.stringify(this.props,null, 2)}</code></pre>
       </div>
     )

example/src/UserComponent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {withFlux} from 'react-pubflux';
+
+class UserComponent extends React.PureComponent{
+
+  render(){
+    const { data } = this.props;
+
+    return <li>
+      <label>{data.id}</label> : <small> {data.username} </small>
+    </li>
+  }
+}
+
+UserComponent.stateToProps = (store, select, props)=>({
+  // notice we dont need to pass store to getUserById.. its already bound
+  data: select.auth.getUserById(props.id)
+})
+
+export default withFlux(UserComponent)

example/src/index.js

@@ -1,10 +1,10 @@
+import 'babel-polyfill'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   rootReducer,
   selectors,
   actions,
-  Storage,
   STORAGE_ADDR,
 } from './sdk';
 import { Provider } from 'react-pubflux';
@@ -13,6 +13,8 @@ import './index.css'
 import App from './App'
 
 const rootEl = document.getElementById('root');
+const persistState = state => localStorage.setItem(STORAGE_ADDR, JSON.stringify(state));
+const initialState = JSON.parse(localStorage.getItem(STORAGE_ADDR) || "{}")
 
 ReactDOM.render(<Provider
         reducer={rootReducer}

example/src/sdk/auth/actions.js

@@ -3,14 +3,15 @@ import {
   LOGIN_FAILED,
   LOGIN_START,
   LOGIN_END,
+  LOGIN_RESET,
   LOGIN_SUCCESS
 } from '../events';
 
 function log(eventName, eventData){
   console.log(eventName);
   console.table(eventData);
 
-  return void;
+  return ;
 }
 
 async function attempt(_, data, emit) {
@@ -26,8 +27,8 @@ async function attempt(_, data, emit) {
   const login = await new Promise(resolve=>{
     // memic api call !
     const user = {
-      id: parseInt( Math.random()*100 ), // randome id
-      username: data.username
+      id: parseInt( Math.random()*100 , 0), // randome id
+      username
     }
     const data = {
       ok: true,

example/src/sdk/auth/const.js

@@ -1,3 +1,7 @@
 // always name your leaf after folder name
 export const leaf = 'auth';
-export const initalState = { }
+export const initialState = { }
+export const noobUser = {
+  id: '0',
+  username: 'N/A'
+}

example/src/sdk/auth/reducer.js

@@ -1,4 +1,4 @@
-import { leaf, initialState } from "./const";
+import { leaf, initialState, noobUser } from "./const";
 import {LOGIN_SUCCESS, LOGIN_RESET} from '../events';
 
 // path: store.auth
@@ -20,4 +20,5 @@ authReducer.initialState = initialState;
 
 export default authReducer;
 
-export const getUsers = store => store[leaf] || initialState;
+export const getAuth = store => store[leaf] || initialState;
+export const getUserById = (store, id) => getAuth(store)[id] || noobUser;

example/src/sdk/config/actions.js

@@ -5,6 +5,7 @@ import {
 
 // i'm a noob fn. i will just use this to pass along events to reducer
 function noob(eventName, eventData){
+  console.log('noob runniung', eventName);
   return {
     type: eventName,
     data: eventData

example/src/sdk/config/const.js

@@ -1,5 +1,5 @@
 
 export const leaf = 'config';
-export const initalState = {
-  randome: Math.random()
+export const initialState = {
+  randome: 0
 }

example/src/sdk/config/reducer.js

@@ -17,3 +17,5 @@ configReducer.initialState = initialState;
 configReducer.eventName = [CONFIG, CONFIG_RESET];
 
 export default configReducer;
+
+export const getConfig = store => store[leaf] || initialState;

example/src/sdk/index.js

@@ -19,3 +19,5 @@ export const actions = [
   ...Config.actions,
   ...Auth.actions
  ];
+
+export const STORAGE_ADDR = '/APP/V1/'