api調用後應用程序狀態不會更新

Question

我錯過了asyn調用如何在react-redux中工作的關鍵步驟/概念。

目前，我能夠做出api調用（也可以通過chrome-dev-tools查看返回的數據），但是響應數據並不是 ，反映在應用程序狀態中;這意味着測驗對象的狀態（默認情況下是空對象）不會被更新。

我的期望是，當asyn調用解決時，我通過quizReducer中的響應進行解析，並返回一個反映響應數據的新狀態（而不是突變狀態）。

但是，每次進行調用時，更新的狀態都會返回一個空的測驗對象（這是初始狀態）。

我知道我錯過了一些東西，但我無法弄清楚什麼;會真的很感激一些指針/解釋。謝謝

的應用程序有看起來像這樣的初始化狀態/加載狀態：

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

設置有問題的減速機：

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）：

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

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

在你QuizActionCreator，你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 
    } 
    ... 
};