React and Redux: An Example of Using Redux with React

fullReactRedux.js

// constants.js

export const SHOW_CREATE_PROFILE = 'SHOW_CREATE_PROFILE';

// actions.js:

import * as types from './constants';

export function showCreateProfile() {
  return {
     type: types.SHOW_CREATE_PROFILE
  };
}

// reducer.js:

import * as types from './constants';

const initialState = {
  showCreateProfile: false,
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
  case types.SHOW_CREATE_PROFILE:
  return assign({}, state, {
  showCreateProfile: true
  });
  default:
       return state;
  }
}

// CreateProfileLink (Where the click function):

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { showCreateProfile } from './actions';

class CreateProfileLink extends Component { //eslint-disable-line react/prefer-stateless-function
  render() {
  return (
  <div className="create-profile" onClick={ this.props.showCreateProfile } >
  <i className="gg-round-puls" />
  <span className="create-profile-text">Create New Profile</span>
  </div>
  );
  }
}

CreateProfileLink.propTypes = {
  showCreateProfile: PropTypes.func
};

function dispatcher(dispatch) {
  return {
  showCreateProfile() {
  dispatch(showCreateProfile());
  }
  };
}

export default connect(null, dispatcher)(CreateProfileLink);

// CreateProfile(Main file that will hide/show):

import { connect } from 'react-redux';
import classNames from 'classnames';

class CreateProfile extends Component {
    state = {
        active: false,
    };

    render() {
        const { showCreateProfile } = this.props;
        const collectionClass = classNames('', {
            block: showCreateProfile
        });
        return (
            <div className={ collectionClass || 'hide' }>
                <h1> Hello from the other side </h1>
            </div>
        );
    }
}

CreateProfile.propTypes = {
    showCreateProfile: PropTypes.bool
};
function collect(state) {
    const { showCreateProfile } = state.sidebar;
    return {
        showCreateProfile
    };
}

export default connect(collect)(CreateProfile);