In react, to verify and show a component, we do:
const [state, setState] = useState(false);
<button ... onClick={() => setState(true)} />
{state && <MyComponent />}
but what if I want to change this code to use redux?
You could use react-redux to achieve this, even though there's some boilerplate code required to set up your store if you don't have one yet.
You could do something like the following:
import { useSelector, useDispatch } from 'react-redux'
import { showViewAction } from './viewDisplaySlice'
export const MyComponent = () => {
const shouldDisplayComponent = useSelector(state => state.shouldDisplay);
const dispatch = useDispatch();
return (
....
<button
onClick={() => dispatch(showViewAction())}
>
...
</button>
{ shouldDisplayComponent && <MyViewComponent /> }
</div>
);
};
You may find quick start guide helpful to setup store and using react-redux: https://redux.js.org/tutorials/quick-start