Category: JavaScript

Categories
React Answers

How to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux.

In this article, we’ll look at how to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux.

How to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux?

To fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux, we call the connect function with the component to make the dispatch prop available within the component.

For instance, we write

import { connect } from "react-redux";

//...

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    },
  };
};

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

to add the mapStateToProps and mapDispatchToProps functions to make the Redux state and the dispatch function available to components respectively.

And then we call connect with both functions to return another function.

We then call the returned function with TodoList and assign the returned component to VisibleTodoList to make dispatch available in VisibleTodoList as a prop.

Conclusion

To fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux, we call the connect function with the component to make the dispatch prop available within the component.

Categories
JavaScript Answers

How to append to URL and refresh page with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to append to URL and refresh page with JavaScript.

In this article, we’ll look at how to append to URL and refresh page with JavaScript.

How to append to URL and refresh page with JavaScript?

To append to URL and refresh page with JavaScript, we append to the window.location.href string.

For instance, we write

let url = window.location.href;
if (url.indexOf("?") > -1) {
  url += "&param=1";
} else {
  url += "?param=1";
}
window.location.href = url;

to append a substring to the url according to the value of url.

And then we set the new url string as the value of window.location.href to update the URL and refresh the page.

Conclusion

To append to URL and refresh page with JavaScript, we append to the window.location.href string.

Categories
JavaScript Answers

How to find the index of an object whose attributes match a search in an array of objects with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to find the index of an object whose attributes match a search in an array of objects with JavaScript.

In this article, we’ll look at how to find the index of an object whose attributes match a search in an array of objects with JavaScript.

How to find the index of an object whose attributes match a search in an array of objects with JavaScript?

To find the index of an object whose attributes match a search in an array of objects with JavaScript, we can use the findIndex method.

For instance, we write

const index = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }].findIndex(
  (obj) => obj.id === 3
);

to call findIndex to find the item that has id set to 3 in the

[{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

array and return the index of the match.

Conclusion

To find the index of an object whose attributes match a search in an array of objects with JavaScript, we can use the findIndex method.

Categories
JavaScript Answers

How to normalize mouse wheel speed across browsers with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to normalize mouse wheel speed across browsers with JavaScript.

In this article, we’ll look at how to normalize mouse wheel speed across browsers with JavaScript.

How to normalize mouse wheel speed across browsers with JavaScript?

To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.

For instance, we write

const handleScroll = (evt) => {
  const direction = evt.detail < 0 || evt.wheelDelta > 0 ? 1 : -1;
};

someEl.addEventListener("mousewheel", handleScroll, false);

to add the handleScroll function that checks if evt.detail is less than 0 or evt.wheelDelta is bigger than 0 and return 1.

Otherwise, we return -1.

evt.detail < 0 || evt.wheelDelta > 0 being true means we’re scrolling up.

Otherwise, we’re scrolling down.

Conclusion

To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.

Categories
JavaScript Answers

How to get contentEditable caret position with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get contentEditable caret position with JavaScript.

In this article, we’ll look at how to get contentEditable caret position with JavaScript.

How to get contentEditable caret position with JavaScript?

To get contentEditable caret position with JavaScript, we change the selection to start from the beginning and then get the length of the full selected string.

For instance, we write

const cursorPosition = () => {
  const sel = document.getSelection();
  sel.modify("extend", "backward", "paragraphboundary");
  const pos = sel.toString().length;
  if (sel.anchorNode !== undefined) {
    sel.collapseToEnd();
  }

  return pos;
};

to get the selection with getSelection.

Then we move the selection back to the beginning of the input value with

sel.modify("extend", "backward", "paragraphboundary");

And then we get the caret position pos with the length of the selection.

Conclusion

To get contentEditable caret position with JavaScript, we change the selection to start from the beginning and then get the length of the full selected string.