javascript - 用 redux react js，我的容器在成功操作/reducers 后没有接收数据

Question

我有点困惑。所以我在 2 周前开始 react ，最近开始使用 redux(仍在学习中)，我决定试一试。

所以我只是想通过 API 获取并显示列表。

然后我很自豪，从我的容器:

import React, { Component, PropTypes } from 'react';

import { fetchPosts, invalidateReq } from '../actions/ajaxactions';
import DisplayWikiList from '../components/trending';
import DisplayBroadmatchList from '../components/trending';
import ColumnName from '../components/trending';
import DisplayOutPut from '../components/trending';

var Redux = require('redux');
var ReactRedux = require('react-redux');
var Card = require('material-ui/lib/card/card');

const { connect } = ReactRedux;


export default class DisplayTrendings extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchPosts('trendings'));
    document.title = 'Blippar-wise Trendings - Blippar Dashboard';
  }

  render() {
    const { posts, isFetching } = this.props;
    console.log("posts :", posts);
    const isEmpty = posts.length === 0;
    return (
      <Card className="card-main">
          <h2 className="trending-title">Trendings</h2>
          <ColumnName />

          {isEmpty
            ? (isFetching ? <h2>Loading...</h2> : <h2>Empty request.</h2>)
            : <div className="col-md-6">
                <DisplayWikiList style={{ opacity: isFetching ? 0.5 : 1 }} posts={posts} />
              </div>
          }

          <div className="col-md-6">
            <div className="row">
              <div className="col-xs-6">
                <input type="text" className="bespoke-label" />
              </div>
              <DisplayOutPut />
            </div>
          </div>
      </Card>
    );
  }
};

DisplayTrendings.propTypes = {
  posts: PropTypes.array,
  isFetching: PropTypes.bool,
  dispatch: PropTypes.func
};

function mapStateToProps(state) {
  const {
    isFetching,
    items: posts
  } = {
    isFetching: true,
    items: []
  }
  return {
    posts,
    isFetching
  };
};

export default connect(mapStateToProps)(DisplayTrendings)

我的操作让我的流程完美无缺:

import fetch from 'isomorphic-fetch'

var Config = require('../configuration/config');

export const REQUEST_POSTS = 'REQUEST_POSTS'
export const RECEIVE_POSTS = 'RECEIVE_POSTS'
export const INVALIDATE_REQ = 'INVALIDATE_REQ'

export function invalidateReq(value) {
  return {
    type: INVALIDATE_REQ,
    value
  };
};

function requestPosts(value) {
  return {
    type: REQUEST_POSTS,
    value
  };
};

function receivePosts(json) {
    return {
        type: RECEIVE_POSTS,
        posts: json
    };
};

export function fetchPosts(value) {
    return dispatch => {
        dispatch(requestPosts(value));
        return fetch(Config.serverUrl + '/' + value, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                Authorization: Config.authorizationToken
            },
        })
          .then(response => response.json())
          .then(json => dispatch(receivePosts(json)))
    };
};

然后它被正确地分派(dispatch)给我的 reducer !

import { combineReducers } from 'redux'
import {
  INVALIDATE_REQ,
  REQUEST_POSTS, RECEIVE_POSTS
} from '../actions/ajaxactions'

function posts(state = {
  isFetching: false,
  didInvalidate: false,
  items: []
}, action) {
  switch (action.type) {
    case INVALIDATE_REQ:
        return Object.assign({}, state, {
            didInvalidate: true
        });
    case REQUEST_POSTS:
        return Object.assign({}, state, {
            isFetching: true,
            didInvalidate: false
        });
    case RECEIVE_POSTS:
        return Object.assign({}, state, {
            isFetching: false,
            didInvalidate: false,
            items: action.posts
        });
    default:
      return state;
  }
};

const rootReducer = combineReducers({
    posts
});

export default rootReducer;

是的!极好的! (让我补充一点，我用一些非常智能的 console.logs 检查了所有这些)

但是，我的页面在“isFetching”(加载)时卡住，当我检查容器上的值“posts”时，它肯定是空的:(

有人可以帮助我在 redux 流和我的容器之间建立联系吗？还是我在这段代码中做错了什么？

非常感谢你们!

编辑:这是我加载页面时控制台中的内容:

Answer 1

在您的容器中，您将 isFetching 设置为 true，因此它将始终为 true。

看起来您可能正在尝试设置默认状态，但这里不是设置默认状态的地方。

function mapStateToProps(state) {
  const {
    isFetching,
    items: posts
  } = {
    isFetching: true, // <-- this will always be true
    items: []
  }
  return {
    posts,
    isFetching
  };
};