Question

我正在学习redux。我第一次写了相同的申请。我无法理解为什么数据不是从商店中提取的。我的连接电话有什么问题吗？请帮忙。

我在调用下面的map时未定义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;

Reducer dataReducer

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();

Reducers 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();

Answer 1

您必须首先访问您的reducer状态（dataReducer）然后其属性：

Thread.Sleep

Answer 2

在您的商店中，您有df <- data.frame(X1 = c(1, 5, 2), X2 = c(12, 4, 19), X3 = c(4, 11, 21), X4 = c(6, 2, 2))的密钥：

dataReducer

但您可以在此处export default combineReducers({ dataReducer });访问它：

contactsList

因此，您可能需要在商店中使用该密钥：

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

Redux，连接方法不起作用。数据未从商店获取

2 个答案: