用 redux 反應 js，我的容器在成功操作/reducers 后沒有接收數據

Question

我有點困惑。 所以我在 2 周前開始反應，最近（仍在學習中）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)))
    };
};

然后它正確地發送到我的減速器！

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

Answer 2

在從這個 refacto 項目中休息一周后，我能夠找出問題所在。

當元素發生變化時，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
  };
};

它有效！ 嗚嗚嗚！