redux-thunk更新コンポーネントを使用して複数のアクションを一度だけディスパッチする

Question

コンポーネント内の1つのディスパッチから複数のアクションをディスパッチするのにredux-thunkを使用しています。

export function fetchQuestions() { 
    return function(dispatch, getState) { 
    dispatch({type: "QUESTION_FETCH_PENDING"}); 
    axios.get(`http://${API_ROOT}/api/questions/list`, { 
     headers: {'JWT': getState().users.token} 
    }) 
    .then((response) => {    
     //if registration is successful tell it to reducer and authorize user 
     dispatch({type: "QUESTION_FETCH_SUCCESS", payload: response}); 
    }) 
    .catch((err) => { 
     if (err.response.data == "login") { 
      dispatch(unauthorizedRequest()); 
     } 

     dispatch({ 
      type: "QUESTION_FETCH_FAIL", 
      payload: err 
     }); 
    }); 
    } 
} 

問題は、ラッピングディスパッチの内側にある各ディスパッチでコンポーネントを更新したいということです。彼らはすべて減速機に進み、私は彼らがコンソールに記録されて見ることができます。

しかし、それは発生しません、コンポーネントは、最初の発送後に更新されます。 "FEED RENDER"というメッセージが呼び出され、毎回render()と呼ばれ、残りのディスパッチ後に呼び出されることはありません。

ありがとうございます！

UPDATE 1：

@connect((store) => { 
return { 
     questions: store.questions, 
     isAuth: store.users.isAuth 
    }; 
}) 

問題のあるコンポーネント：

export default class Feed extends React.Component { 

componentWillMount() { 
    this.props.dispatch(fetchQuestions()); 
} 

componentWillUpdate() { 
    console.log(this.props); 
    if (!this.props.isAuth) { 
     this.props.router.push('/auth'); 
    } 
} 

logout() { 
    this.props.dispatch(logoutUser()); 
} 

render() { 
    console.log("FEED RENDER!"); 

    let questions = this.props.questions.questions.map((question) => {<questionFeed question={question}/>}); 

    return (
     <div> 
      <button onClick={this.logout.bind(this)}>LOGOUT</button> 
      THIS IS FEED! 
     </div> 
    ); 
    } 
} 

Answer 1

問題ここに私の減速

export default function reducer(state={ 
questions: [], 
questionPending: false, 
questionSuccess: false, 
questionFetching: false, 
questionFetched: false, 
error: null 
}, action) { 
    switch(action.type) { 
     case "QUESTIONS_FETCH_PENDING": { 
      return {...state, questionFetching: true, questionFetched: false} 
     } 
     case "QUESTIONS_FETCH_SUCCESS": { 
      return {...state, questionFetching: false, questionFetched: true, questions: action.payload} 
     } 
     case "QUESTIONS_FETCH_FAIL": { 
      return {...state, questionFetching: false, questionFetched: false, error: action.payload} 
     } 
     case "QUESTION_ADD_PENDING": { 
      return {...state, questionPending: true, questionSuccess: false} 
     } 
     case "QUESTION_ADD_SUCCESS": { 
      return {...state, questionPending: false, questionSuccess: true} 
     } 
     case "QUESTION_ADD_FAIL": { 
      return {...state, questionPending: false, questionSuccess: false} 
     } 
    } 

    return state; 
} 

や店舗を注入するために、私は単に@connectデコレータを使用するためのコードがあります単純でしたTYPO：n行動のエッセンスはレデューサーにあるエッセンスと一致しませんでした。

私はQUESTION_FETCH_FAILとQUESTION_FETCH_SUCCESSを送信していましたが、QUESTIONS_FETCH_FAILとQUESTIONS_FETCH_SUCCESSを処理していました。

解決策：ベストプラクティスreduxに従うと、常にアクション名を変数に格納して、それらをレデューサーと共有する必要があります。

NOTEは：本当に誤植