README
:t-rex: :heavy_plus_sign: :atom_symbol: = React-Trux
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
dispatch
ing actions- may in new release
- unsupport currentlly
useAction
hook (alike reduxdispatch
)- 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:
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
andProvider
hooks, should be a same where at the rootTIPS : 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 uselet states = useState()
instead oflet { state } = useTrux();
3.2. use actions
NOTE :
actually,
useAction
hook anddispatch
method are DEPRECATEDwe 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
useCommit
and this.commit
1. - 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>
</>
);
}
useDispatch
and this.dispatch
2. - 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>
</>
);
}
useAction
& this.action
& this.actions
3. - 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 foruseAction
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
LICENSE
under MIT & OPEN-SOURCE
:fist: :heart: