yarn add rc-state
npm install rc-state --save
- Optimized React Context: Enhanced performance, reduces unnecessary renderings.
- Selector Mechanism: Precise state subscription, avoids redundant updates.
- TypeScript Support: Ensures type safety and robustness of code.
const demoStore = createStore({ state: { say: 'hello', name: 'rc-state' } });
const DemoApp = demoStore.withProvider(function () {
const name = demoStore.useSelector((state) => state.name);
const say = demoStore.useSelector((state) => state.say);
const { setState } = demoStore.useContext();
const changeName = (e) => setState((state) => ({ ...state, name: e.target.value }));
return (
<div>
{say} {name}!
<br />
<input value={name} onChange={changeName} />
</div>
);
});
const demo2Store = createStore({
state: { say: 'hello', name: 'rc-state' },
actions: {
changeNameFromEvent: (state, event) => ({ ...state, name: event.target.value }),
},
});
export const Demo2App = demo2Store.withProvider(function () {
return (
<>
<demo2Store.Consumer selectors={[(state) => state.say, (state) => state.name]}>
{({ values: [say, name], actions }) => {
return (
<>
{say} {name}!
<br />
<input value={name} onChange={actions.changeNameFromEvent} />
</>
);
}}
</demo2Store.Customer>
</>
);
});
- createStore(options = {state, select?, actions?}): create a store.
-
options.state
: initial state, eg:{ name: 'rc-state' }
. -
options.selector
: selector function, eg:{useName: (state) => state.name,...}
, must start withuse
. -
options.actions
: updater function, eg:(state) => ({ ...state, name: 'rc-state' })
. -
store.Provider
orstore.withProvider
: wrap the component with a provider. -
store.useContext
: get the context object of the store, which containsgetState
,setState
. -
store.useSelector
: get the state of the store, and subscribe to changes in the state. -
store.useActions
: get the updater function of the store, formoptions.actions
. -
store.state.use...
: get the selector function of the store, formoptions.selector
. -
store.Consumer
: wrap the component with a consumer. seestore.Customer demo
.
MIT