How to hide/display separate forms using buttons and redux?

Question

I'm new to react and redux (and posting on stack overflow!).

I'd like to hide/display a redux-form based on a button choice.

I have two buttons: Option-A and Option-B.

I followed the redux tutorial exactly to have their onClick methods dispatch setVisibilityFilter(buttonprops.filter) through a container. See: FilterLink.js This works fine and updates the state's visibilityFilter with the corresponding option.

However, I'm stuck about how I should access the state's filter to hide/display different forms. I would like something similar to what formValueSelector does, but it isn't applicable for buttons (because they don't return values?)

This is my main component's code:

class MainForm extends Component {
  render() {
    const { error } = this.props
    return ( 
      <Grid.Column width={9}>
        <Button.Group floated='right'>
        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>
        <Button.Or />
        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>
        </Button.Group>
        /* If SHOW_A, display FORM_A, else if SHOW_B, display FORM_B */
    </Grid.Column> 
  )
}}

I feel like just toying with the state directly now would waste the effort of implementing redux. I think I should be passing the value as a prop down to the child forms, but I'm confused how to do so, especially because I don't know how I would get that value without changing my onClick anyway, and onClick is already defined in FilterLink.js

There must be some way to access my state visibility filter to hide/display a form, just unsure how to get there. Thank you!

Answer 1

With connect, you can pass anything from the Redux Store to your component through its props.

So based on the link you posted, this should work:

import { connect } from 'react-redux'

class MainForm extends Component {
  render() {
    const { error, visibilityFilter } = this.props
    return ( 
      <Grid.Column width={9}>
        <Button.Group floated='right'>
        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>
        <Button.Or />
        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>
        </Button.Group>
        {visibilityFilter === VisibilityFilters.SHOW_A
          ? <FormA />
          : <FormB />
        }
    </Grid.Column> 
  )
}}

const mapStateToProps = state => ({
  visibilityFilter: state.visibilityFilter
})

export default connect(mapStateToProps)(MainForm)