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