API呼び出し後にアプリケーションの状態が更新されない

Question

asynの呼び出しがreact-reduxでどのように機能するかの重要なステップ/コンセプトがありません。

現在、私はapi呼び出しを行うことができます（chrome-dev-toolsを介して返されるデータを見ることもできます）。しかし、応答データはアプリケーション状態に反映されません（ ）。デフォルトでは空のオブジェクトであるクイズオブジェクトの状態は更新されません。

私の期待は、asyn呼び出しが解決すると、私はquizReducerの応答を解析し、応答データを反映する新しい状態（変化した状態ではない）を返します。

しかし、呼び出しが行われるたびに、更新された状態は空のクイズオブジェクト（初期状態）を返します。

私は何かが不足していることを知っていますが、私は何を理解できません。本当にいくつかのポインタ/説明を感謝します。ありがとう

アプリのようになります初期状態/プリロード状態だった：

import initialState from './initialState'; 
    import quizConstants from '../constants/quizConstants'; 
    const actionTypes = quizConstants.actions 

    // when app loads, user has not selected any quiz therefore 
    // initialState is an empty object 
    // here action is the payload we get when a quiz is selected (see QUIZ_SELETED action creator) 


    export default function quiz(state=initialState.quiz, action) { 
     switch(action.type){ 
     // when a quiz is selected, return new state 
     case actionTypes.SELECT_QUIZ: 
      return Object.assign(
      {}, 
      state, 
      { 
       id: action.quiz.id, 
       name: action.quiz.name, 
       completed: action.quiz.completed, 
       selected: !action.quiz.selected, 
       fetching: action.quiz.fetching, 
       fetched: action.quiz.fetched, 
       questions: action.quiz.questions 
      } 
     ) 
     case actionTypes.REQUEST_QUIZ: 
      return Object.assign(
      {}, 
      state, 
      { 
       id: action.quiz.id, 
       name: action.quiz.name, 
       completed: action.quiz.completed, 
       selected: !action.quiz.selected, 
       fetching: !action.quiz.fetching, 
       fetched: action.quiz.fetched, 
       questions: action.quiz.questions 
      } 
     ) 
     case actionTypes.RECEIVE_QUIZ: 
      return Object.assign(
      {}, 
      state, 
      { 
       id: action.quiz.id, 
       name: action.quiz.name, 
       completed: action.quiz.completed, 
       selected: !action.quiz.selected, 
       fetching: action.quiz.fetching, 
       fetched: !action.quiz.fetched, 
       quiz: action.quiz.questions 
      } 
     ) 
     default: 
      return state 
     } 
    }; 

index.js（rootreducer）：

問題の減速のための

export default { 
    quizzes: [ 
    {id: 0, name: "quiz_name2", completed: false, selected: false}, 
    {id: 1, name: "quiz_name2", completed: false, selected: false} 
    ], 
    quiz: { questions: {} } 
}; 

セットアップを

import { combineReducers } from 'redux'; 
    import { routerReducer } from 'react-router-redux'; 
    import quizzes from './quizzesReducer' 
    import quiz from './quizReducer'; 

    export default combineReducers({ 
     quizzes, 
     quiz, 
     routing: routerReducer 
    }); 

QuizActionCreators

あなたの QuizActionCreatorで

import quizConstants from '../constants/quizConstants'; 
    import { quizzesEndPoint } from '../constants/appConstants'; 
    import axios from 'axios'; 

    const actionTypes = quizConstants.actions 

    // select a quiz 
    export const selectQuiz = (quiz) => { 
     return { 
     type: actionTypes.SELECT_QUIZ, 
     quiz 
     } 
    }; 

    const receiveQuiz = (quiz, data) => { 
     return { 
     type: actionTypes.RECEIVE_QUIZ, 
     quiz, 
     data 
     } 
    }; 

    // call when componentWillMount 
    export const fetchQuiz = (quiz) => { 
     console.log("Make an api request here") 
     const url = quizzesEndPoint.concat(quiz.name) 
     axios.get(url) 
     .then(response => response.data) 
     .then(data => receiveQuiz(quiz, data)) 
    } 
    export default { selectQuiz, fetchQuiz}; 

Answer 1

、あなたのfetchQuizはreceiveQuizを呼び出し、後者は、サーバからのデータを持っているあなたのパラメータとしてquizとdataを渡しています。 action.dataを州に設定しているあなたのレデューサーには、私はどの部分も見ません。

quizzesReducerの中にRECEIVE_QUIZのハンドラを追加して、action.dataを状態に戻してください。

//quizzesReducer.js 
export default function (state = initialState.quizzes, action){ 
    ... 
    if (action.type === actionTypes.RECEIVE_QUIZ) { 
     return action.data 
    } 
    ... 
};