react-trux

non-dependencies react-js state hooks

Usage no npm install needed!

<script type="module">
  import reactTrux from 'https://cdn.skypack.dev/react-trux';
</script>

README

:t-rex: :heavy_plus_sign: :atom_symbol: = React-Trux

npm package

non-dependencies react hook for managing state as globaly (using context api)

every react developer know, state is isolated to component!

so if we create a hooks that work with no dependencies (only react-context-api), that help us to work with global state

List

Pros vs. Cons

  • :heavy_check_mark: Pros
    • non-dependencies
    • setup and use with only 3 steps
    • easy to use
    • easy setup
  • :heavy_multiplication_x: Cons
    • unsupport currentlly class component states/actions
    • unsupport currentlly dispatching actions
      • may in new release
    • unsupport currentlly useAction hook (alike redux dispatch)
      • may in new release
    • unsupport currentlly useState hook for accessing faster to global states
      • may in new release

Example

mini-app counter

available in here

Install

  • npm
    • npm install react-trux
  • yarn
    • yarn add react-trux

Rules

improve in next release :hugs:

demo

Safe Steps

1. Initialize

create you stores (states and actions)

1.1. Actions

this is you methods for updating states

NOTE : if you use actions as single file, then, you would non-default export it

// store/actions.js
const MY_ACTION_ONE = ({ state }) => {
  return { ...state, myStateKey: myCustomValue };
};
const MY_ACTION_TWO = ({ state }, arg1) => {
  return { ...state, myOtherState: arg1 };
};
const MY_ACTION_THREE = ({ state }) => {
  return { ...state, myINCREMENT: state.myINCREMENT + 1 };
};

export { MY_ACTION_ONE, MY_ACTION_TWO, MY_ACTION_THREE };

OR

// store/actions.js
const MY_ACTIONS = {
  NORM_CASE({ state }){
    return {...state, myState: state.myState < 50 ? state.myState + 1 : 0 }
  },
  'kebab-case-action': ({ state }) => {
    return { ...state, 'kebab-state': state['kebab-state'] + 1 };
  }
};
export { ...MY_ACTIONS };

1.2. States

there is your initial values for your states

// store/state.js
const myState = 0;
const myStateObject = { value: 0, foo: 'bar' };

export default { myState, myStateObject, 'kebab-state': 0 };

NOTE : you can first export states

// store/state.js
export default {
  myState: 0,
  myStateObject: { value: 0, foo: 'bar' },
  'kebab-case': 0,
};

2. Create Trux

NOTE : createTrux and Provider hooks, should be a same where at the root

TIPS : you can use below to any root compoent do think is.

// src/App.js (or any other root-component do you think)
import React from 'react';
import { Provider, createTrux } from 'react-trux';

// import other things (e.g. components, styles)
import MyComponent from './components/my-component.jsx';

// import STATES and ACTIONS
import * as Actions from './store/actions';
import States from './store/states';

// also, you can import here any thing else

function App(props) {
  let Store = createTrux({ state: States, actions: Actions });
  return (
    <Provider store={Store}>
      <MyComponent />
    </Provider>
  );
}

3. Use Trux

we try to use store thing (state, actions) in children components

NOTE : currentlly work with react-functional components

3.1. use states

TIPS :

anywhere you can use useTrux

but, clean code say, we should use this, in component block scope

imports

// components/my-component.jsx
import React from 'react';
import { useTrux } from 'react-trux';

function statement component

function MyComponent() {
  let { state, actions } = useTrux();
  return <div id='my-component'>{state.myState}</div>;
}

arrow function component

const MyComponent = () => {
  let { state, actions } = useTrux();
  return <div id='my-component'>{state.myState}</div>;
};

export component

export default MyComponent;

DEPREACATED

TIPS :

you can use let states = useState() instead of let { state } = useTrux();

3.2. use actions

NOTE :

actually, useAction hook and dispatch method are DEPRECATED

we can use only useTrux hooks

// components/my-button.jsx
// ... other code ...

const MyButton = () => {
  let { state, actions } = useTrux();
  return (
    <>
      <button onClick={actions.MY_ACTION} className='btn btn-secondary'>
        i'm a button, and run without any parameters
      </button>

      <button onClick={actions['kebab-actions']} className='btn btn-secondary'>
        i'm a button too, but, as kebab-case
      </button>

      <button
        onClick={() => actions.MY_ACTION(MyParameter)}
        className='btn btn-secondary'
      >
        i'm a button, i give the parameter
      </button>

      <button
        onClick={() => actions['other-kebab-actions'](MyParam)}
        className='btn btn-secondary'
      >
        i'm a button too, with kebab-case and parameter
      </button>

      <button
        onClick={() =>
          state.my_value < 50
            ? actions.value_is_low()
            : actions.value_is_hight()
        }
        className='btn btn-secondary'
      >
        i'm use if statement in my click body
      </button>
    </>
  );
};

// ... another code ...

hooks/methods

TIPS: all of this hooks/methods are DEPRECATED

1. useCommit and this.commit

  • class component

    if state available in class, change them, else, find in global states

class MyComponent extends React.Component {
  // .. constructor ...

  render() {
    return (
      <>
        <button onClick={() => this.commit('which-state', new_value)}>
          me as button
        </button>
      </>
    );
  }
}
  • function component

    change global states

function MyComponent() {
  return (
    <>
      <button onClick={() => useCommit('which-state', new_value)}>
        me as button
      </button>
    </>
  );
}

2. useDispatch and this.dispatch

  • class component
class MyComponent extends React.Component {
  // ... constructor ...
  render() {
    return (
      <>
        <button onClick={() => this.dispatch('ACTION_NAME', 'parameter')}>
          click to dispatch
        </button>
      </>
    );
  }
}
  • functional component
function MyComponent() {
  return (
    <>
      <button onClick={() => useDispatch('ACTION_NAME', 'parameter')}>
        click to dispatch
      </button>
    </>
  );
}

3. useAction & this.action & this.actions

  • class component
class MyComponent extends React.Component {
  // ... constructor ...
  render() {
    return (
      <>
        <button onClick={() => this.action('ACTION_NAME', 'parameter')}>
          click to call action
        </button>

        <button onClick={() => this.actions.ACTION_NAME('parameter')}>
          click to call other action
        </button>

        <button onClick={() => this.actions['ACTION_NAME']('parameter')}>
          click to call another action
        </button>
      </>
    );
  }
}
  • functional component

    TIPS: callAction is alise for useAction

function MyComponent() {
  return (
    <>
      <button onClick={() => useAction('ACTION_NAME', 'parameter')}>
        click to use action
      </button>

      <button onClick={() => callAction('ACTION_NAME', 'parameter')}>
        click to call action
      </button>
    </>
  );
}

Social

github npmjs email contribute

LICENSE

under MIT & OPEN-SOURCE

:fist: :heart: