in React JS by
Q:

What is the proper way to access Redux store?

1 Answer

0 votes
by

The best way to access your store in a component is to use the connect() function, that creates a new component that wraps around your existing one. This pattern is called Higher-Order Components, and is generally the preferred way of extending a component's functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates.

Let's take an example of <FilterLink> component using connect:

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux developers almost always recommend using connect() over accessing the store directly (using context API).

class MyComponent {
  someMethod() {
    doSomethingWith(this.context.store)
  }
}
Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked Jun 22, 2020 in JQuery by DavidAnderson
0 votes
asked Feb 24 in React JS by SakshiSharma
0 votes
asked Jun 19, 2020 in React JS by JackTerrance
0 votes
asked Mar 4, 2020 in React JS by JackTerrance
0 votes
0 votes
0 votes
asked Mar 4, 2020 in React JS by JackTerrance
0 votes
...