F - Component Logic.tsx

// Example

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

export const Profile = connect(
  ({ profile: { name } }) => ({ name }),
  dispatch => ({ changeName: newName => dispatch(newName.toLowerCase()) }),
)(
  ({ 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: '',
  },
  action,
) {
  switch (action.type) {
    case CHANGE_NAME:
      return {
        ...state,
        ...createNameFormats(action.payload),
      };
    default:
      return state;
  }
}
    
function createNameFormats(name = '') {
  return {
    name,
    lowerCaseName: name.toLowerCase(),
    upperCaseName: name.toUpperCase(),
  };
}

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