React redux組件未在商店更改上更新？

Question

我遇到了這個問題，我的一個組件在更改存儲時沒有更新。

這是行不通Single.js組件：

export default class Single extends React.Component { 

componentWillMount(){ 
    const { items } = this.props.articles; 
    const { id } = this.props.params; 

    if (items.length == 0 || typeof items == 'undefined') { 
     console.log('fetching'); 
     this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())); 
    } 

} 

render(){ 
    const { items } = this.props.articles; 
    const { id } = this.props.params; 

    var index; 

    for(var i in items){ 
     var item = items[i]; 
     if (id == item.id){ 
       index = i; 
       break; 
     } 
    } 

    var item = this.props.articles.items[index]; 

    console.log(this.props.articles.items); 

    return <h1> {item.title} </h1> 
} 

} 

這是我ArticleList.js組件，它不工作和更新本身正確：

import React from "react"; 

    import Vote from '../ArticleParts/Vote'; 
    import Thumbnail from '../ArticleParts/Thumbnail'; 
    import Title from '../ArticleParts/Title'; 

    export default class ArticleList extends React.Component { 

     componentWillMount(){ 
      this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())) 
     } 

     renderArticles(item, i){ 
      return(
       <div class="row" style={{marginTop: "10px"}} key={i}> 
        <Vote id={item.id} score={item.score} i={i} {...this.props}/> 
        <Thumbnail thumbnail={item.thumbnail} id={item.id} type={item.type}/> 
        <Title title={item.title} id ={item.id}/> 
       </div> 
      ); 
     } 
     render(){ 

      console.log(this.props.articles.items); 

      return(
       <div> 
        {this.props.articles.items.map(this.renderArticles.bind(this))} 
       </div> 
      ); 
     } 
    } 

我用連接在App.js：

import {bindActionCreators} from 'redux'; 
    import {connect} from 'react-redux'; 
    import * as ActionCreators from '../actions/ActionCreators'; 

    import Main from './Main'; 

    function mapStateToProps(state) { 
     return { 
     articles: state.articles, 
     votes: state.votes 
     } 
    } 

    function mapDispatchToProps(dispatch){ 
     return bindActionCreators(ActionCreators, dispatch); 
    } 

    const App = connect(mapStateToProps, mapDispatchToProps)(Main); 

    export default App; 

這是我的索引對於路由器：

ReactDOM.render(
     <Provider store={store}> 
      <Router history={history}> 
       <Route path="/" component={App}> 
        <IndexRoute component={ArticleList}></IndexRoute> 
        <Route path="/:id" component={Single}></Route> 
       </Route> 
      </Router> 
     </Provider>, 
     app 
    ); 

編輯========

這是我減速articles.js：

import * as ActionConst from '../actions/ActionConst'; 

    const initialState = { 
     fetching: false, 
     fetched: false, 
     items: [], 
     error: null 
    } 

    function articles(state=initialState, action){ 
     switch (action.type){ 
      case ActionConst.articles_req: { 
       return { 
        ...state, 
        fetching: true 
       } 
      } 
      case ActionConst.articles_got: {  
       return { 
        ...state, 
        fetching: false, 
        fetched: true, 
        items: action.payload 
       } 
      } 
      case ActionConst.articles_err: { 
       return { 
        ...state, 
        fetching: false, 
        fetched: false, 
        error: action.payload 
       } 
      } 
      default: 
       return state; 
     } 
    } 

    export default articles; 

這是我store.js：

import {createStore, compose, applyMiddleware} from 'redux'; 
    import {syncHistoryWithStore} from 'react-router-redux'; 
    import {browserHistory} from 'react-router'; 
    import thunk from 'redux-thunk'; 
    import logger from 'redux-logger'; 
    import promise from 'redux-promise-middleware'; 


    import RootReducer from './reducers/index'; 

    import votes from './data/votes'; 
    import articles from './data/articles'; 

    const middleware = applyMiddleware(promise(), thunk, logger()); 

    const store = createStore(RootReducer, middleware); 

    export const history = syncHistoryWithStore(browserHistory, store) 

    export default store; 

在我的ActionCreators.js

export function fetchArticles(data){ 
    return { 
    type: action.articles_const, 
    payload: data 
    } 
} 

對不起，有很多的代碼。任何幫助，將不勝感激。 感謝

Answer 1

我想這樣的代碼：

componentWillMount(){ 
    this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())) 
} 

應該是：

componentWillMount(){ 
    fetch('http://localhost:8000/api/v1/article').then((res)=>{ 
    this.props.fetchArticles(res.json()); 
}) 
} 

Answer 2

resp.json()也返回一個承諾。所以，你將不得不調用另一個then得到數據：

變化：

this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())) 

到

this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json()).then(data => data)) 

或者更乾淨：

const { fetchArticles } = this.props; 
const data = fetch('http://localhost:8000/api/v1/article') 
    .then(res => res.json()) 
    .then(data => data) 
    .catch(err => throw err /* handle error somehow */); 

fetchArticles(data);