React — Why use TaskRunner over Redux, useReducer

What is the story?

What is the TaskRunner?

How-To

import {createTaskRunner} from "merced-react-hooks"        //The Initial State
const initialState = {
count: 0
}
//The Task List, list of functions to run
const taskList = {
add: (state, setState, payload) => {
setState({...state, count: state.count + payload})
},
sub: (state, setState, payload) => {
setState({...state, count: state.count - payload})
}
}
//Generate the TaskStore and useTaskStore hook
export const [TaskStore, useTaskStore] = createTaskRunner(
initialState,
taskList
)
// index.jsx
import {TaskStore} from "./tr.js"

ReactDOM.render(<TaskStore><App/></TaskStore>)
// /components/component.jsx
import React from "react'
import {useTaskStore} from "../tr.js"

const Component = (props) => {
//Get TaskRunner store and runTask function
const {taskStore, runTask} = useDataStore()

//Invoke runTask to run a task and update the taskStore
return <><h1>{taskStore.title}</h1>
<button onClick={() => runTask("add", 5)}>Click Me</button>
}

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store