【问题标题】：Application state doesn't get updated after api callapi调用后应用程序状态未更新
【发布时间】：2017-04-06 00:39:02
【问题描述】：

我错过了异步调用如何在 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};

【问题讨论】：

您使用的是redux-thunk 或redux-saga 还是类似的副作用库？此外，在 QuizActionCreators 文件中，倒数第三行调用receiveQuiz。 receiveQuiz 定义在哪里？
嗨@Mihir！我编辑了问题以包含receiveQuiz（最初发布问题时忘记包含它）。
这段代码太多了。阅读如何发布MCV 问题。

标签： reactjs redux react-redux

【解决方案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
   }
   ...
};

【讨论】：