Question

我有点困惑。所以我在2周前开始做出反应并且最近还在减少（还在学习中），我决定去吧。

所以我只是尝试进行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)))
    };
};

然后它正确发送到我的缩减器！

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;

YES！超！（让我补充一点，我用一些非常智能的console.logs检查了所有内容）

但是，我的页面冻结了“isFetching”（加载），当我检查容器上的“posts”值时，它肯定是空的：（

有人可以帮助我在redux流量和容器之间建立联系吗？或者我在这段代码中做了哪些非常错误？

非常感谢你们！

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

Answer 1

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

看起来你可能正在尝试设置默认状态，但这不是那个地方。

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

Answer 2

从这个重构项目休息一周后，我能够找出问题所在。

当元素发生变化时，reactJs会围绕state属性进行攻击，我一直都没有使用这个属性......

所以，对于写第一个答案的克里斯来说，我能够找出问题所在。

而不是写作：

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

现在我想起来很奇怪，我切换到状态解决方案，这一直就在我面前：

function mapStateToProps(state) {
  console.log("state: ", state);
  const {
    isFetching,
    items: posts
  } = {
    isFetching: state.posts.isFetching,
    items: state.posts.items
  }
  return {
    posts,
    isFetching
  };
};

它有效！ Wuhuuu！

将js与redux反应后，我的容器在成功操作/减速器后没有收到数据

2 个答案: