How do I access store state in React Redux? How do I access store state in React Redux? reactjs reactjs

How do I access store state in React Redux?


You should create separate component, which will be listening to state changes and updating on every state change:

import store from '../reducers/store';class Items extends Component {  constructor(props) {    super(props);    this.state = {      items: [],    };    store.subscribe(() => {      // When state will be updated(in our case, when items will be fetched),       // we will update local component state and force component to rerender       // with new data.      this.setState({        items: store.getState().items;      });    });  }  render() {    return (      <div>        {this.state.items.map((item) => <p> {item.title} </p> )}      </div>    );  }};render(<Items />, document.getElementById('app'));


Import connect from react-redux and use it to connect the component with the state connect(mapStates,mapDispatch)(component)

import React from "react";import { connect } from "react-redux";const MyComponent = (props) => {    return (      <div>        <h1>{props.title}</h1>      </div>    );  }}

Finally you need to map the states to the props to access them with this.props

const mapStateToProps = state => {  return {    title: state.title  };};export default connect(mapStateToProps)(MyComponent);

Only the states that you map will be accessible via props

Check out this answer: https://stackoverflow.com/a/36214059/4040563

For further reading : https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132


You need to use Store.getState() to get current state of your Store.

For more information about getState() watch this short video.