updated example project

Author: DaniAkash

rex-example/src/App.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { useRex } from "rex-state";
+import store from "./store/store";
+
+const { useRex } = store;
 
 export default function App() {
   const store = useRex();
@@ -23,15 +25,13 @@ export default function App() {
       <button onClick={onAddTask}>Submit</button>
       <ul>
         {todos.list.map((item, itemIndex) => {
-          const onClickCheckbox = () => {
-            // now how to toggle this elegantly??
-          };
+          const onClickCheckbox = () => todos.toggleTask(itemIndex);
           return (
             <li key={itemIndex}>
               <input
                 type="checkbox"
                 onChange={onClickCheckbox}
-                checked={item.taskStatus}
+                checked={item.status}
               />
               {item.task}
             </li>

rex-example/src/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { RexProvider } from "rex-state";
 import store from "./store/store";
 import App from "./App";
-// import './index.css'
+
+const { RexProvider } = store;
 
 ReactDOM.render(
-  <RexProvider store={store}>
+  <RexProvider>
     <App />
   </RexProvider>,
   document.getElementById("app-root")

rex-example/src/store/Todos.ts

@@ -9,19 +9,22 @@ export interface ITodosRexState {
   list: ITask[];
 }
 
-class Todos extends Rex {
-  state = {
-    list: [
-      {
-        task: "Task One",
-        status: false
-      },
-      {
-        task: "Task Two",
-        status: false
-      }
-    ]
-  };
+class Todos extends Rex<ITodosRexState> {
+  constructor() {
+    super();
+    this.state = {
+      list: [
+        {
+          task: "Task One",
+          status: false
+        },
+        {
+          task: "Task Two",
+          status: false
+        }
+      ]
+    };
+  }
 
   addTask = (newTask: string) => {
     const newTaskObject = {
@@ -32,6 +35,15 @@ class Todos extends Rex {
     this.setState({ list });
   };
 
+  toggleTask = (index: number) => {
+    const list = [...this.state.list];
+    list[index] = {
+      task: list[index].task,
+      status: !list[index].status
+    };
+    this.setState({ list });
+  };
+
   get list() {
     return this.state.list;
   }

rex-example/src/store/store.ts

@@ -1,7 +1,8 @@
 import Todos from "./Todos";
+import { createRexStore } from "rex-state";
 
-const store = {
+const store = createRexStore({
   todos: Todos
-};
+});
 
 export default store;