F - Connect Function Logic.tsx

// Example

export const profileReducer = function (state = { name: '' }, { type, payload }) {
  switch (action) {
    case CHANGE_NAME:
      return { ...state, name: payload };
    default:
      return state;
  }
}

export const Profile = connect(
  ({ profile: { name } }) => {
    if (name === 'Andrew') {
      return { name };
    } else {
      return { name: name && name.toUpperCase() };
    }
  }
  dispatch => ({
    changeName: newName => {
      if (newName && newName != 'Andrew') {
        dispatch(newName.toLowerCase());
      } else {
        dispatch(newName.split('n').join(''));
      }
    }
  }),
)(
  ({ name, changeName }) => (
    <>
      <div>{name && name.toUpperCase()}</div>
      <button onClick={changeName('NEW NAME')}>change name</button>
    </>
  ),
);

Good - Reducer Logic.tsx

// Better Example

export const profileReducer = function (
  state = {
    name: '',
    lowerCaseName: '',
    upperCaseName: '',
  },
  { type, payload }
) {
  switch (action) {
    case CHANGE_NAME:
      let name = payload;
      let displayName = payload || '';
      let storedName = payload || '';

      if (name === 'Andrew') {
        displayName = name;
        storedName = newName.split('n').join('');
      } else if (name) {
        displayName = newName.toUpperCase();
        storedName = newName.toLowerCase();
      }

      return {
        ...state,
        name,
        displayName,
        storedName,
      };
    default:
      return state;
  }
}

export const Profile = connect(
  ({ profile: { displayName: name } }) => ({ name }),
  dispatch => ({ changeName: newName => dispatch(newName) }),
)(
  ({ name, changeName }) => (
    <>
      <div>{name}</div>
      <button onClick={changeName('NEW NAME')}>change name</button>
    </>
  ),
);