createStore must be passed at the root
import { createStore } from 'react-reprox'
const INITIAL_STATE = {
counter: { counter1: 0 }
}
createStore(INITIAL_STATE);
or, if you are using vanilla js
import { createStore } from 'reprox'
const store = createStore(INITIAL_STATE);
And you are all set. Just like that.
Just use useStore
and pass the required selectors for effective re-rendering
import { store } from 'react-reprox'
const Counter = ({ stateKey }) => {
const state = useStore([stateKey]);
return (
<div>
<h2>{state.counter[stateKey]}</h2>
<button
onClick={() => {
state.counter[stateKey] += 1;
}}
>
+
</button>
<button>-</button>
<button>Reset</button>
</div>
);
};
import Counter from './Counter'
const App = () => {
return <Counter stateKey='counter1' />
}
You can share ref easily by using useSharedRef
and passing in a key
import { useSharedRef } from 'react-reprox'
const App = () => {
const ref = useSharedRef('appRef');
<div ref={ref}>
...
</div>
}
and you can use the current value of this ref anywhere in your application by passing in the same key
import { useSharedRef } from 'react-reprox'
const SomeComponent = () => {
const appRef = useSharefRef('appRef');
useEffect(() => {
console.log(appRef.current);
}, [])
<div>
...
</div>
}
- [ ] Solving potential tearing issue
- [ ] Rethink selectors, if it's really necessary, and if not then how can we give developers the option to controll re-renders on state change
- [ ] Option to add middlewares
- [ ] Handling async func
- [ ] Option to sync url state with proxy state
- [ ] Adding typescript
- [ ] Setting up the build and publish process
- [ ] useSharedRef should have the option to re-render the component when the current changes from null to not null