Merge branch 'rex-perf-fix'

Author: DaniAkash

README.md

@@ -50,66 +50,55 @@ npm i rex-state
 
 Rex State is inspired by React's simplicity in building UI. Hence it borrows one of the most common React-ish style for creating & updating states.
 
-### This is a traditional React Class Component
+### This is a classic React functional component with `useState` hook
 
 ```jsx
-import React, { Component } from "react";
-
-export default class InputField extends Component {
-  constructor() {
-    super();
-    this.state = {
-      value: ""
-    };
-  }
-
-  updateValue = newValue => this.setState({ value: newValue });
-
-  render() {
-    return (
-      <input
-        type="text"
-        placeholder="Add Text here..."
-        value={this.state.value}
-        onChange={event => this.updateValue(event.target.value)}
-      />
-    );
-  }
-}
+import React, { useState } from "react";
+
+const InputField = () => {
+  const [value, updateValue] = useState("");
+
+  return (
+    <input
+      type="text"
+      value={value}
+      placeholder="Add Text here..."
+      onChange={event => updateValue(event.target.value)}
+    />
+  );
+};
 ```
 
-The above component will render a simple input field and will take care of updating the input state when a new value is entered in the input field. However, the state & UI are tightly coupled together and it is impossible to reuse the same state logic to a different UI.
+The above component will render a simple input field and will take care of updating the input state when a new value is entered in the input field. However, the state & UI are tightly coupled together and it is impossible to reuse the same state logic to a different component.
 
 ### This is the same component using Rex State
 
 ```jsx
 import React from "react";
-import Rex from "rex-state";
-
-class InputState extends Rex {
-  constructor() {
-    super();
-    this.state = {
-      value: ""
-    };
-  }
-
-  get value() {
-    return this.state.value;
-  }
-
-  updateValue = newValue => this.setState({ value: newValue });
-}
+import useRex from "rex-state";
+
+const useInput = () => {
+  const [state, setState] = useRex({ value: "" });
+
+  return {
+    get value() {
+      return state.value;
+    },
+    updateValue(value: string) {
+      setState({ value });
+    }
+  };
+};
 
 const InputField = () => {
-  const inputState = new InputState();
+  const { value, updateValue } = useInput();
 
   return (
     <input
       type="text"
+      value={value}
       placeholder="Add Text here..."
-      value={inputState.value}
-      onChange={event => inputState.updateValue(event.target.value)}
+      onChange={event => updateValue(event.target.value)}
     />
   );
 };
@@ -119,15 +108,13 @@ export default InputField;
 
 The functionality of the component remains unchanged, however we now have two entities.
 
-- `InputState` is a class which is used to define your application state.
-- `InputField` is a functional React Component that uses `InputState` to render it's UI.
+- `useInput` is a hook which is used to define your application state.
+- `InputField` is a functional React Component that uses `useInput` hook to render it's UI.
 
-This decouples the UI from the State and also provides a nice & familiar class based API to define & manage your states.
+This decouples the UI from the State and also provides a nice & familiar way to write an API to define & manage your states.
 
 Refer the Example app. Documentation will be completed soon...
 
-### You can also try it live in [**codesandbox!**](https://codesandbox.io/s/state-management-with-rex-4olpn?fontsize=14&hidenavigation=1&theme=dark)
-
 ## Running the Example App
 
 - Clone this Repo

rex-example/src/App.tsx

@@ -1,43 +1,40 @@
-import React, { useState } from "react";
-import store from "./store/store";
-
-const { useRex } = store;
+import React from "react";
+import { useFormFieldStore } from "./store/useFormField";
 
 export default function App() {
-  const store = useRex();
-  const { todos } = store;
-
-  const [newTask, updateNewTask] = useState("");
-
-  const onAddTask = () => {
-    todos.addTask(newTask);
-    updateNewTask("");
-  };
-
+  const {
+    values,
+    updateName,
+    updateEmail,
+    updateAge,
+    updatePhone
+  } = useFormFieldStore();
   return (
     <div>
       <input
         type="text"
-        value={newTask}
-        onChange={event => updateNewTask(event.target.value)}
-        placeholder="New Task"
+        value={values.name}
+        onChange={e => updateName(e.target.value)}
+        placeholder="Name"
+      />
+      <input
+        type="text"
+        value={values.email}
+        onChange={e => updateEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <input
+        type="text"
+        value={values.phone || ""}
+        onChange={e => updatePhone(e.target.value)}
+        placeholder="Phone"
+      />
+      <input
+        type="number"
+        value={values.age || ""}
+        onChange={e => updateAge(parseInt(e.target.value))}
+        placeholder="Age"
       />
-      <button onClick={onAddTask}>Submit</button>
-      <ul>
-        {todos.list.map((item, itemIndex) => {
-          const onClickCheckbox = () => todos.toggleTask(itemIndex);
-          return (
-            <li key={itemIndex}>
-              <input
-                type="checkbox"
-                onChange={onClickCheckbox}
-                checked={item.status}
-              />
-              {item.task}
-            </li>
-          );
-        })}
-      </ul>
     </div>
   );
 }

rex-example/src/SimpleApp.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import useRex from "rex-state";
+
+const useInput = () => {
+  const [state, setState] = useRex({ value: "" });
+
+  return {
+    get value() {
+      return state.value;
+    },
+    updateValue(value: string) {
+      setState({ value });
+    }
+  };
+};
+
+const SimpleApp = () => {
+  const { value, updateValue } = useInput();
+
+  return (
+    <input
+      type="text"
+      value={value}
+      placeholder="Add Text here..."
+      onChange={event => updateValue(event.target.value)}
+    />
+  );
+};
+
+export default SimpleApp;

rex-example/src/index.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import store from "./store/store";
 import App from "./App";
+import { FormFieldProvider } from "./store/useFormField";
 
-const { RexProvider } = store;
+// import SimpleApp from "./SimpleApp";
+
+// ReactDOM.render(<SimpleApp />, document.getElementById("app-root"));
 
 ReactDOM.render(
-  <RexProvider>
+  <FormFieldProvider>
     <App />
-  </RexProvider>,
+  </FormFieldProvider>,
   document.getElementById("app-root")
 );

rex-example/src/store/Todos.ts

@@ -0,0 +1,44 @@
+import useRex, { createRexStore } from "rex-state";
+
+type formFields = {
+  name: string;
+  email: string;
+  gender?: "male" | "female";
+  phone?: string;
+  age?: number;
+};
+
+const useFormField = () => {
+  const defaultState: formFields = {
+    name: "",
+    email: ""
+  };
+
+  const [state, setState] = useRex(defaultState);
+
+  return {
+    get values() {
+      return state;
+    },
+    updateName(name: formFields["name"]) {
+      setState({ name });
+    },
+    updateEmail(email: formFields["email"]) {
+      setState({ email });
+    },
+    updatePhone(phone: formFields["phone"]) {
+      setState({ phone });
+    },
+    updateGender(gender: formFields["gender"]) {
+      setState({ gender });
+    },
+    updateAge(age: formFields["age"]) {
+      setState({ age });
+    }
+  };
+};
+
+const { RexProvider, useStore } = createRexStore(useFormField);
+
+export const FormFieldProvider = RexProvider;
+export const useFormFieldStore = useStore;