Toggle state value using selector.

[Berkays]

Hi, I am trying to toggle a state variable in a selector but it doens't seem to change. I want this toggle function to be parameterless.

When i trigger span's onClick nothing happens. Overlay shows if isSidenavOpen has default value of true.

Stores:

const uiState = atom({
	key: 'uiState',
	default: {
		isSidenavOpen: false
	}
});

const SidenavSelector = selector({
	key: 'uiStateSidenavToggle',
	get: ({ get }) => get(uiState).isSidenavOpen,
	set: ({ get, set }) => set(uiState, {...uiState, isSidenavOpen: !get(uiState).isSidenavOpen})
});

React:

const App: React.FC = () => {
	const [isSidenavOpen, toggleSidenav] = useRecoilState(SidenavSelector);

	return (
		<React.Fragment>
			<span onClick={isSidenavOpen ? () => toggleSidenav : null}>
			</span>
                <CartOverlay />
		</React.Fragment>
	);
};

[david-trumid]

not sure why you want it parameterless if you are only showing the span when it is open, think you want to pass false in that case right?. I think you want this though

const SidenavSelector = selector({
	key: 'uiStateSidenavToggle',
	get: ({ get }) => get(uiState).isSidenavOpen,
	set: ({ get, set }) => set(uiState, (currentState) => ({...currentState, isSidenavOpen: !currentState.isSidenavOpen}))
});

[Berkays]

Writing toggleSidenav is more readable for me instead of setSidenavState(true) it's why i want it to have optional parameter. The code you gave doesn't transpile for typescript (currentState is not found) .

[david-trumid]

ahh forgot the parenthesis, should be good now here is a codesandbox https://codesandbox.io/s/recoil-sandbox-20200516-forked-p7tqj?file=/src/App.js

.. few things i noticed ..

you were spreading over the atom, not the value {...uiState, my snippet is using the setter method which will provide the current state as a parameter

and you were not invoking the setter (missing the () on () => toggleSidenav)

[Berkays]

Thank you it works!