Reactjs React redux-无法提取部分状态

有一个操作创建者：

export function selectBook(book) {
  // selectBook is an ActionCreator, it needs to return an action,
  // an object with a type property.
  return {
    type: 'BOOK_SELECTED',
    payload: book,
  };
}

有一个简单的减速器：

export default function() {
  return [
    { title: 'Javascript: The Good Parts', pages: 101 },
    { title: 'Harry Potter', pages: 39 },
    { title: 'The Dark Tower', pages: 85 },
    { title: 'Eloquent Ruby', pages: 1 }
  ];
}

代码的其余部分如下所示：

现在，我正在玩它，想返回例如标题中的字符数，但首先我只想提取动作创建者中的标题并显示它。我对动作创建者进行了如下修改：

export function selectBook(book) {
  // selectBook is an ActionCreator, it needs to return an action,
  // an object with a type property.
  let title = book.title;
  console.log(title);
  return {
    type: 'BOOK_SELECTED',
    payload: book,
    count: title
  };
}

之后，我将向“title”添加方法——我现在只想从组件访问它。上面的console.logtitle正确输出标题。从链接中可以看到，它然后经过mapStateToProps，然后

<div>Title: {this.props.book.title}</div>
<div>Pages: {this.props.book.pages}</div>
<div>Count: {this.props.book.count}</div>

我尝试了上述方法，但语法错误

还有一些代码缩减器索引：

import { combineReducers } from 'redux';
import BooksReducer from './reducer_books';
import ActiveBook from './reducer_active_book';

const rootReducer = combineReducers({
  books: BooksReducer,
  activeBook: ActiveBook
});

export default rootReducer;

包含MapStateTops的容器：

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

class BookDetail extends Component {
  render() {
    if (!this.props.book) {
      return <div>Select a book to get started.</div>;
    }

    return (
      <div>
        <h3>Details for:</h3>
        <div>Title: {this.props.book.title}</div>
        <div>Pages: {this.props.book.pages}</div>
        <div>Count: {this.props.book.count}</div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    book: state.activeBook
  };
}

export default connect(mapStateToProps)(BookDetail);

---

根据评论中给出的建议，它需要的是对象扩充：

export default function (state = null, action) {
  switch (action.type) {
  case 'BOOK_SELECTED':
    return { payload: action.payload, count: action.count };
  }

  return state;
}

---

根据评论中给出的建议，它需要的是对象扩充：

export default function (state = null, action) {
  switch (action.type) {
  case 'BOOK_SELECTED':
    return { payload: action.payload, count: action.count };
  }

  return state;
}

---

在reducer中，您需要增加state对象以反映您发送的新负载。不确定您的需求是什么，但我猜您只想返回一个包含标题、页面和减缩器中的计数的对象

由于确实存在语法错误，因此在减速器中出现了错误

如果我正确理解要求，正确的实施方式是：-

export default function (state = null, action) {
  switch (action.type) {

  case 'BOOK_SELECTED':
    return { title: action.payload.title, 
             pages: action.payload.pages,
             count: action.count };
  }

  return state;
}

我想说的另一件事是，你无论如何都在传递有效载荷中的book，那么为什么你需要单独传递count，因为它可以很容易地从book对象推断出来

你的行动可以是：-

export function selectBook(book) {
  return {
    type: 'BOOK_SELECTED',
    payload: book
  };

减速器应为：-

export default function (state = null, action) {
      switch (action.type) {

      case 'BOOK_SELECTED':
        return book;
      }

      return state;
    }

---

在reducer中，您需要增加state对象以反映您发送的新负载。不确定您的需求是什么，但我猜您只想返回一个包含标题、页面和减缩器中的计数的对象

由于确实存在语法错误，因此在减速器中出现了错误

如果我正确理解要求，正确的实施方式是：-

export default function (state = null, action) {
  switch (action.type) {

  case 'BOOK_SELECTED':
    return { title: action.payload.title, 
             pages: action.payload.pages,
             count: action.count };
  }

  return state;
}

我想说的另一件事是，你无论如何都在传递有效载荷中的book，那么为什么你需要单独传递count，因为它可以很容易地从book对象推断出来

你的行动可以是：-

export function selectBook(book) {
  return {
    type: 'BOOK_SELECTED',
    payload: book
  };

减速器应为：-

export default function (state = null, action) {
      switch (action.type) {

      case 'BOOK_SELECTED':
        return book;
      }

      return state;
    }

---

请共享您的MapStateTrops，您可能没有正确设置状态。在上面的代码中，您没有从this.props.book.count中获得任何值，因为它是未定义的。据我所知，您没有对所选book_的减速机中的计数执行任何操作。如果您不通过减速机使用count更新状态，您希望状态如何反映这一点？谢谢。我添加了更多代码mapStateToProps。Abihishek，你是对的，但是我试图在一个减缩器中返回2个元素，但是得到了一个语法错误。请参见上文。在reducer中，您需要增加state对象以反映您发送的新负载。不确定您的要求是什么，但我想您只想在reducer中返回标题。这是不合法的js:return{action.payload，action.count}。您需要为值添加键。只有与值命名完全相同的键才能使用此速记符号。请共享您的MapStateTops，您可能没有正确设置状态。在上面的代码中，您没有从this.props.book.count中获得任何值，因为它是未定义的。据我所知，您没有对所选book_的减速机中的计数执行任何操作。如果您不通过减速机使用count更新状态，您希望状态如何反映这一点？谢谢。我添加了更多代码mapStateToProps。Abihishek，你是对的，但是我试图在一个减缩器中返回2个元素，但是得到了一个语法错误。请参见上文。在reducer中，您需要增加state对象以反映您发送的新负载。不确定您的要求是什么，但我想您只想在reducer中返回标题。这是不合法的js:return{action.payload，action.count}。您需要为值添加键。只有与值命名完全相同的键才能使用此速记符号