Redux, метод подключения не работает.Данные не получены из магазина - PullRequest
Новая
       4

Redux, метод подключения не работает.Данные не получены из магазина

0 голосов
/ 12 мая 2018

Я учу редукцию. Я написал заявление на то же самое, в первый раз. Я не могу понять, почему данные не извлекаются из хранилища. Что-то не так с моим соединением? Пожалуйста, помогите.

Я получаю ошибку, что contactsList не определен при вызове карты ниже, хотя connect должен получить этот список в соответствии с моим пониманием.

ContactCards.js 

import React, { Component } from 'react';
import Card from './Card';
import { connect } from 'react-redux';

const CardList = ({ contactsList }) => {
  const cardsArray = contactsList.map(contact => (
    <Card
      key={contact.id}
      name={contact.name}
      email={contact.email}
      phone={contact.phone}
      website={contact.website}
      city={contact.address.city}
      companyName={contact.company.name}
      id={contact.id} />
  ));

  return (
    <div className="jumbotron">
      <div className='card-columns'>
        {cardsArray}
      </div>
    </div>
  );
};

const mapStateToProps = state => {
  return { contactsList: state.contactsList };
};

const ContactCards = connect(mapStateToProps)(CardList);

export default ContactCards;

Редуктор данных Редуктор 

import ContactsList from '../components/MockContactsList';
import {loadContacts, updateContacts} from '../Actions/CardActions';

const INITIAL_STATE = {
  contactsList: ContactsList
};

 const dataReducer = (state = INITIAL_STATE, action) => {
  switch(action.type) {

    case loadContacts:
      return state;

    case updateContacts:
      const updatedItems = state.contactsList.map(item => {
        if(item.id === action.id){
          return { ...item, ...action.payload }
        }
        return item
      })
      return updatedItems;

    default:
      return state;

  }
};

export default dataReducer;

App.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import reducers from './reducers/index';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(reducers, {});

ReactDOM.render(
    <Provider store = {store}>
      <App />
    </Provider>
    ,document.getElementById('root'));

registerServiceWorker();

Редукторы index.js 

import { combineReducers } from 'redux';

import dataReducer from './dataReducer';

export default combineReducers({
  dataReducer
});

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import reducers from './reducers/index';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(reducers, {});

ReactDOM.render(
    <Provider store = {store}>
      <App />
    </Provider>
    ,document.getElementById('root'));

registerServiceWorker();

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Сначала необходимо получить доступ к состоянию редуктора (dataReducer) , затем его свойство: 

const mapStateToProps = state => {
  return { contactsList: state.dataReducer.contactsList };
};
0 голосов
/ 12 мая 2018

В вашем магазине у вас есть ключ dataReducer: 

export default combineReducers({
  dataReducer
});

Но вы обращаетесь к нему как contactsList здесь: 

const mapStateToProps = state => {
  return { contactsList: state.contactsList };
};

Так что вам, вероятно, нужно иметь этот ключ в своем магазине: 

export default combineReducers({
  contactsList: dataReducer
});
...