reducer不传输initialState

Question

this.props没有loading，error密钥。 为什么呢？

我的代码：

https://github.com/jiexishede/react-redux-demo01

您可以分叉并提取请求。

Answer 1

因为您未在mapStateToProps函数

中传递它们

https://github.com/jiexishede/react-redux-demo01/blob/0c1407935cd6c461705d6ca37f3e33484afac327/src/views/Home.js#L8-L10

这应该是这样的：

@connect(state => {
    return {
        articleList: state.home.list.articleList,
        loading: state.home.list.loading,
        error: state.home.list.error,
    };

Answer 2

您没有将组件设置为从商店接收更新。您的组件将不知道reducer已更新状态。看看下面的代码：

import React, { Component } from 'react';
import * as Redux from 'react-redux'; // Import redux
import Preview from './Preview'

class PreviewList extends  Component {
  static propTypes = {
    loading:React.PropTypes.bool,              //  注意 bushi PropTypes.bool,  前面要价 React
    error:React.PropTypes.bool,
    articleList: React.PropTypes.arrayOf(React.PropTypes.object),
    loadArticles: React.PropTypes.func
  };

  componentDidMount(){
    this.props.loadArticles();
  }

  render(){
    const { loading, error, articleList } = this.props;
    if(error){
      return <p className="message">)0ops, something is wrong. </p>
    }
    if(loading){
      return <p className="message">Loading....</p>
    }

    // return this.props.articleList.map(item => (
    //     <Preview {...item} key={item.id}/>
    // ))

    return (
        <div>
          {articleList.map(item => {
            return <Preview {...item} key={item.id} push={this.props.push} />
          })}
        </div>
    );

  }
}

// Connect your component to your store and
// receive updates from your previewList reducer:
export default Redux.connect(state => {
    return {
        loading: state.previewList.loading,
        error: state.previewList.error,
        articleList: state.previewList.articleList
    };
})(PreviewList);

Answer 3

问题是您没有将组件连接到redux商店。您需要安装react-redux软件包，然后使用它的connect函数将组件连接到商店，如下所示：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Preview from './Preview';
import { loadArticles } from './PreviewListRedux';

class PreviewList extends  Component {
  static propTypes = {
    loading:React.PropTypes.bool,      
    error:React.PropTypes.bool,
    articleList: React.PropTypes.arrayOf(React.PropTypes.object),
    loadArticles: React.PropTypes.func
  };

  componentDidMount(){
    this.props.loadArticles();
  }

  render(){
    if (!this.props.loading) {
      return <div>Loading...</div>
    }
    const { loading, error, articleList } = this.props;
    if(error){
      return <p className="message">)0ops, something is wrong. </p>
    }
    if(loading){
      return <p className="message">Loading....</p>
    }

    return (
      <div>
        {articleList.map(item => {
          return <Preview {...item} key={item.id} push={this.props.push} />
        })}
      </div>
    );
   }
}

const mapStateToProps = (state) => {
  return {
    loading: state.list.loading,
    error: state.list.error,
    articleList: state.list.articleList
  }
};

export  default  connect(mapStateToProps, { loadArticles })(PreviewList);

此外，您的代码需要进行一些重大的重组，很难通读它并看到不同部分如何连接在一起。