Skip to content

A governor hook to manage state with actions for, and by, the people.

License

Notifications You must be signed in to change notification settings

NateBrady23/react-governor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Governor

That typical "HOOKS ARE STILL ALPHA" warning

Create a governor hook to manage state with actions for, and created by, the people.

What is a "Governor Hook"?

A governor hook is like any other hook to manage state. You get a governor hook from createGovernor

What is createGovernor?

createGovernor is a function which creates a governor hook. It takes an intitial state and an actions object, and returns a governor hook which can be used in any functional component, just like useReducer, but unlike useReducer there is no need for the developer to build the boilerplate of actions, dispatch, and reducer.

Let's See it in Action

const initialState = { count: 1 };

const actions = {
  increment(state) {
    return {
      count: state.count + 1
    };
  },
  add(val, state) {
    return {
      count: state.count + val
    }
  }
}

const useCountGovernor = createGovernor(initialState, actions);

export default function Counter() {
  const [state, actions] = useCountGovernor();

  return (
    <div>
      <span>Current Count: {state.count}</span>
      <button onClick={() => actions.increment()}>Increment</button>
      <button onClick={() => actions.add(5)}>Add 5</button>
    </div>
  );
}

Test that this works

This should feel very similar to how useReducer works with actions and reducers. However, the actions provided to createGovernor and returned from useCountGovernor are different.

createGovernor expects a collection of actions. These actions are functions which take in any number of arguments and the current state. These actions are responsible for returning an object that describes what in the state should be mutated.

As from our example, the increment action returns an object describing that the state should be mutated such that count is state.count + 1. Similarly, the add action returns an object describing that the state should be mutated such that count is state.count + val, and notice that when we called add that we passed it a value to add.

About

A governor hook to manage state with actions for, and by, the people.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.4%
  • HTML 10.6%