Как получить доступ к магазину в компонентах React?

Я работаю над примером response-redux здесь: https://github.com/timcott/react-devise-sample

Хранилище redux создается в setup.js примерно так: https://github.com/timcott/react-devise-sample/blob/master/client/src/app/setup.js

часть ключа:

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;
};

Вне этого файла в компоненте реакции: CatsPage.js

Я пытаюсь .dispatch (loadCats ()), чтобы приложение реакции получило список кошек с сервера, обновило магазин и волшебным образом отреагировало на обновление dom. Вот что у меня есть в 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);

Я получаю сообщение об ошибке: Uncaught TypeError: _setup.initStore.dispatch is not a function

Я новичок в React-redux.

Обновлять

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;

person AnApprentice    schedule 24.05.2017    source источник


Ответы (1)


Я предполагаю, что вы правильно настроили своего провайдера. Если это так, правильный способ доступа к методу отправки - реквизит. Итак, вы можете сделать что-то подобное.

this.props.dispatch(loadCats())
person Tharaka Wijebandara    schedule 24.05.2017
comment
отлично! это сработало в том смысле, что он позвонил на сервер и получил результаты ... Похоже, что результаты не отражаются в DOM ... DOM не обновляется. Как лучше всего отладить почему? Спасибо - person AnApprentice; 24.05.2017
comment
Ваша cats опора жестко запрограммирована. Вы изменили эту строку cats: [{id:1, name: "Maru"}] в своем mapStateToProps и раскомментировали строку выше? - person Tharaka Wijebandara; 24.05.2017
comment
хороший момент, если я изменю это на cats: state.cats, я получаю сообщение об ошибке CatList.js: 8 Uncaught TypeError: Cannot read property 'map' of undefined - person AnApprentice; 24.05.2017
comment
правильно ли обновленный mapStateToProps? Сейчас cats: state.cats - person AnApprentice; 24.05.2017
comment
Я использую .map позже в CatList.js, только что обновил вопрос файлом ... Идеи? Спасибо - person AnApprentice; 24.05.2017