beer-availability-redux.jsx

/* actions/beer.js */
export const TOGGLE_AVAILABILITY_FOR_BEER = 'TOGGLE_AVAILABILITY_FOR_BEER';

/* dispatchers/beer.js */
import {TOGGLE_AVAILABILITY_FOR_BEER} from '../actions/beer.js';

export const toggleBeerAvailability = () => ({
  type: TOGGLE_AVAILABILITY_FOR_BEER
});

/* reducers/beer.js */
import {TOGGLE_AVAILABILITY_FOR_BEER} from '../actions/beer.js';

const beer = (state = {availableForBeer: true}, action) => {
  switch (action.type) {
    case TOGGLE_AVAILABILITY_FOR_BEER:
      return {...state, availableForBeer: !state.availableForBeer};
    default:
      return state
  }
};

export default beer;

/* components/beer.jsx */
import React from 'react';
import { connect } from 'react-redux';
import { toggleBeerAvailability } from '../dispatchers/beer';

const Beer = ({ isAvailable, toggleAvailability }) => (
  <>
    <div>
      I'm currently
      {isAvailable ? ' ' : ' not '}
      available for a beer
    </div>
    <button onClick={toggleAvailability}>Change</button>
  </>
);

const mapStateToProps = state => ({
  isAvailable: state.availableForBeer
});

const mapDispatchToProps = dispatch => ({
  toggleAvailability: () => dispatch(toggleBeerAvailability(id))
});

export default connect(mapStateToProps, mapDispatchToProps)(Beer);