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

Question

有这个动作创建者：

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

其余代码在这里： https://github.com/StephenGrider/ReduxCasts/tree/master/book_list/src

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

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

之后，我将向“标题”添加方法——我现在只想从组件中访问它。上面的 console.log(title) 正确输出了标题。正如您从链接中看到的那样，它然后通过 mapStateToProps 然后

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

根据原始代码，前两个输出正常。第三个，伯爵，没有。 {this.props.book.count} 输出空白。

对于多个标题的混淆，我们深表歉意。现在在“计数”下，我想输出标题。完成后，我将更改动作创建者以计算标题的字符数。

编辑：

// State argument is not application state, only the state
// this reducer is responsible for
export default function (state = null, action) {
  switch (action.type) {
  case 'BOOK_SELECTED':
    return { action.payload, action.count };
  }

  return state;
}

我试过上面的，但是语法错误。

更多代码（reducers index）：

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;

带有 mapStateToProps 的容器：

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

Answer 1

在 reducer 中，您需要扩充状态对象以反映您发送的新负载。不确定您的要求是什么，但我想您只想在减速器中返回带有标题、页面和计数的对象。

您的减速器中出现错误，因为确实存在语法错误。

如果我理解正确的需求，正确的实现是：-

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 那么为什么需要单独传递计数，因为它可以很容易地从 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;
    }

Answer 2

根据 cmets 中给出的建议，它需要的是对象增强：

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

  return state;
}