How to use the immer function in immer

export function rotatePieceLeft(piece: Piece): Piece {
  if (piece.tiles.length === 0) return piece;

  return produce(piece, (draft) => {
    const newTiles = [];
    // When turning leftwards the first row becomes the first column reversed
    for (let row = 0; row < draft.tiles[0].length; row++) {
      newTiles.push(draft.tiles.map((column) => column[row]).reverse());
    }
    draft.tiles = newTiles;

    pushPieceInBounds(draft);
  });
}

export const tagImportDrawer: Reducer = (
  state = defaultState,
  action
) => {
  return produce(state, draft => {
    if (isType(action, importTagsActions.started)) {
      draft.loading = true;
      draft.success = false;
      draft.errors = [];
    }

    if (isType(action, importTagsActions.done)) {
      draft.loading = false;
      draft.success = true;
      draft.errors = [];
    }

    if (isType(action, importTagsActions.failed)) {
      draft.loading = false;
      draft.errors = action.payload.error;
    }

let sort
  switch (name) {
    case 'id':
    case 'salary':
      if (order === 'asc') sort = (a, b) => a[name] - b[name]
      else sort = (a, b) => b[name] - a[name]
      break
    default:
      if (name) {
        if (order === 'asc') sort = (a, b) => a[name].localeCompare(b[name])
        else sort = (a, b) => b[name].localeCompare(a[name])
      }
      break
  }

  let data = sort ? immer(allData, draft => draft.sort(sort)) : allData

  if (username) {
    username = username.toLocaleLowerCase()
    data = data.filter(d => `${d.firstName} ${d.lastName}`.toLocaleLowerCase().indexOf(username) >= 0)
  }

  return data.slice(start, start + count)
}

export default (state = defaultState, action) =>
    produce(state, draft => {
        switch (action.type) {
            case SET_PANEL_MINIMIZED:
                draft.panelMinimized = action.minimized;
                break;

            case SET_PANEL_SIZE:
                draft.panelHeight = action.height;
                draft.panelWidth = action.width;
                break;

            case CLICK_SIDEBAR_URL:
                const url = action.url;
                if (isMainFrameUrl(url)) {
                    draft.mainFrameUrl = url;
                    draft.overlayUrl = null;
                } else {

export const fetchSuccess = (state = INITIAL_STATE, action) => produce(state, (draft) => {
  const index = findIndexByItineraryStep(action.meta.itineraryStep, draft.itinerarySteps);

  if (index !== -1) {
    const draftByItineraryStep = draft.itinerarySteps[index];

    draftByItineraryStep.data = action.payload;
    draftByItineraryStep.isFetching = action.meta.isFetching;
    draftByItineraryStep.error = action.error;

    draft.itinerarySteps[index] = draftByItineraryStep;
  }
});

export const enable = (state = INITIAL_STATE, action) => produce(state, (draft) => {
  draft.enabled = true;
  draft.itineraryStep = action.payload.itineraryStep;
});

selectChangeHandler = (field: keyof Config) => (e: any) => {
    const selected = e.target.value
    this.setState(produce(draft => {
      draft.selector[field] = selected
    }), () => saveConfigure(this.state.selector))
  }

export async function setZoomFactor(
    value: number,
    state?: AppStoreModel
): Promise {
    return produce(state, draft => {
        const store = new electronStore({
            name: 'settings',
        });
        draft.settings.system.zoomFactor = value;
        store.store = draft.settings;
    });
}

[String(loadRepo)]: state =>
      produce(state, draft => {
        draft.repository = undefined;
        draft.repoNotFound = false;
      }),
    [String(loadRepoSuccess)]: (state, action: Action) =>

render() {
		const {
			name,
			value,
			field,
			totalOptionsCount,
			selectedOptions,
			queryTerm
		} = this.props;

		let { options } = this.props;

		if ( ! field.duplicates_allowed ) {
			options = produce( options, ( draft ) => {
				draft.map( ( option ) => {
					option.disabled = !! find( value, ( selectedOption ) => isMatch( selectedOption, {
						id: option.id,
						type: option.type,
						subtype: option.subtype
					} ) );

					return option;
				} );
			} );
		}

		return (
			
				<div>
					</div>