How to access the store in React components?

Question

I'm working off the react-redux example here: https://github.com/timscott/react-devise-sample

The redux store is being created in setup.js like so: https://github.com/timscott/react-devise-sample/blob/master/client/src/app/setup.js

key part:

const initStore = ({onRehydrationComplete}) => {
  store = createStore(
    combineReducers({
      ...reactDeviseReducers,
      cats: [],
      form: formReducer,
      router: routerReducer,
      apollo: apolloClient.reducer()
    }),
    {},
    compose(
      applyMiddleware(
        thunk,
        routerMiddleware(history),
        apolloClient.middleware()
      ),
      autoRehydrate()
    )
  );

  persistStore(store, {
    blacklist: [
      'form'
    ]
  }, onRehydrationComplete);

  return store;
};

Outside of this file in a react component: CatsPage.js

I'm trying to .dispatch(loadCats()) so the react app will fetch the list of cats from the server, update the store, and react magically update the dom. Here is what I have in CatsPage.js:

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import CatList from './CatList';
import {loadCats} from '../../actions/catActions';
import {initStore} from '../../app/setup';

class CatsPage extends React.Component {
  state = {
    rehydrated: false
  };
  componentDidMount() {
    initStore.dispatch(loadCats())
  }
  render() {
    return (
      <div>
        <h1>Cats</h1>
        <div>
          <CatList cats={this.props.cats} />
        </div>
      </div>
    );
  }
}

CatsPage.propTypes = {
  cats: PropTypes.array.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    cats: state.cats
  };
}

export default connect(mapStateToProps)(CatsPage);

I'm getting the error: Uncaught TypeError: _setup.initStore.dispatch is not a function

I'm a react-redux beginner.

Update

CatList.js

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

const CatList = ({cats}) => {
  return (
      <ul className="list-group">
        {cats.map(cat =>
           <li className="list-group-item" key={cat.id}>
            <Link to={'/cats/' + cat.id}>{cat.name}</Link>
           </li>
        )}
      </ul>
  );
};

CatList.propTypes = {
  cats: PropTypes.array.isRequired
};

export default CatList;

Tharaka Wijebandara · Accepted Answer · 2017-05-24 05:04:58Z

1

I assume that you have setup your Provider correctly. If so correct way to access dispatch method is props. So you can do something like this.

this.props.dispatch(loadCats())

answered May 24, 2017 at 5:04

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AnApprentice Over a year ago

nice! that worked in that it made the call to the server and got the results... The results do not appear to be reflected in the DOM... The DOM is not updating. What would be the best way to debug why? Thanks

Tharaka Wijebandara Over a year ago

Your cats prop is hard coded. Did you change this line cats: [{id:1, name: "Maru"}] in your mapStateToProps and uncomment above line?

AnApprentice Over a year ago

good point, if I change that to cats: state.cats I get the error CatList.js:8 Uncaught TypeError: Cannot read property 'map' of undefined

AnApprentice Over a year ago

is the updated mapStateToProps correct? It's now cats: state.cats

AnApprentice Over a year ago

I'm using .map later in CatList.js, I just updated the question with the file... Ideas? Thanks

Collectives™ on Stack Overflow

How to access the store in React components?

Update

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related