Usage

yarn add synergies immer

constvalueAtom=createAtom("");constisInitialStateAtom=createAtom(true);

constuseSetValue=createSynergy(valueAtom,isInitialStateAtom).createAction((newValue:string)=>(valueDraft,isInitialStateDraft)=>{// Components that read from the value atom will be updated.valueDraft.current=newValue;if(isInitialStateDraft.current){// If isInitialState is already false, then the draft will not be updated,// and components that read from it will not trigger a rerender.isInitialStateDraft.current=false;}});// Every atom is also a synergy of itself, so we can call `createSelector` also on atoms.constuseValue=valueAtom.createSelector(value=>value);constuseIsInitialState=isInitialStateAtom.useValue;// shortcut for directly reading atom state

<SynergyProvideratoms={[valueAtom,isInitialStateAtom]}>{/* Components that consume value and isInitialState... */}{/* We can also nest other synergy providers */}<SynergyProvideratoms={[moreLocalizedAtom]}>{/* Can read from and write to all three atoms. */}</SynergyProvider>{/* Reuse providers with more localized state */}<SynergyProvideratoms={[moreLocalizedAtom]}>{/* ... */}</SynergyProvider></SynergyProvider>

constComponent=()=>{constsetValue=useSetValue();constvalue=useValue();return(<inputvalue={value}onChange={e=>setValue(e.target.value)}/>)}

More advanced examples

Async update logic

constisLoadingAtom=createAtom(false);constdataAtom=createAtom(null);// Async update handlerconstuseFetchData=createSynergy(dataAtom,isLoadingAtom).createAction(()=>async(data,isLoading)=>{isLoading.current=true;// Trigger rerenders of all components that read from the `isLoading` atom.// The `isLoading` draft will be discarded, so we need to use the new one// that the `trigger` method returns.isLoading=isLoading.trigger();constres=awaitfetch("https://pokeapi.co/api/v2/pokemon/pikachu");// Update the `data` and `isLoading` atomsdata.current=awaitres.json();isLoading.current=false;});// For simplicity, read from both atoms at onceconstusePokemonData=createSynergy(dataAtom,isLoadingAtom).createSelector((data,isLoading)=>({ data, isLoading}));exportconstExample=()=>{const{ data, isLoading}=usePokemonData();constfetchData=useFetchData();constresetData=useReset();return!data&&!isLoading ?(<ButtononClick={fetchData}>LoadPokemon</Button>) :isLoading ?(<div>Loading...</div>) :(<div>{data.name}hasaheightof{data.height}andtheabilities{" "}{data.abilities.map(({ ability})=>ability.name).join(", ")}</div>);};

Nested synergy providers

// ---------------------// Atoms// ---------------------constfilterAtom=createAtom(false);constitemsAtom=createAtom([{todo:"First Todo",checked:true},{todo:"Second Todo",checked:false},{todo:"Third Todo",checked:false},]);constinputValueAtom=createAtom("");// ---------------------// Selectors and state actions// ---------------------constuseFilteredItems=createSynergy(itemsAtom,filterAtom).createSelector((items,filter)=>items.filter(({ checked})=>!filter||checked));constuseAddTodo=createSynergy(itemsAtom,inputValueAtom).createAction(()=>(items,input)=>{items.current.push({todo:input.current,checked:false});input.current="";});constuseToggleTodo=itemsAtom.createAction((id:number)=>items=>{items.current[id].checked=!items.current[id].checked;});constuseToggleFilter=filterAtom.createAction(()=>filter=>{filter.current=!filter.current;});// ---------------------// Components that use the hooks// ---------------------constList=()=>{constitems=useFilteredItems();consttoggle=useToggleTodo();return(<>{items.map((item,index)=>(<Checkboxkey={index}checked={item.checked}label={item.todo}onChange={()=>toggle(index)}/>))}</>);};constTodoInput=()=>{const[value]=inputValueAtom.useValue();constsetValue=inputValueAtom.useSet();constaddTodo=useAddTodo();return(<ControlGroup><InputGroupplaceholder="Add a todo"value={value}onChange={e=>setValue(e.target.value)}/><ButtononClick={addTodo}>Add</Button></ControlGroup>);};constFilterButton=()=>{consttoggle=useToggleFilter();const[isToggled]=filterAtom.useValue();return(<ButtononClick={toggle}active={isToggled}>Onlyshowcompletedtodos</Button>);};// ---------------------// App container// ---------------------exportconstApp=()=>(// We don't have to nest the providers so extremely, but this demonstrates how you can inject// atoms at any place in the hierarchy and they can still communicate upwards with other// atoms.<SynergyProvideratoms={[filterAtom]}><FilterButton/><SynergyProvideratoms={[itemsAtom]}><List/><SynergyProvideratoms={[inputValueAtom]}><TodoInput/></SynergyProvider></SynergyProvider></SynergyProvider>);

Maintenance