反应+ redux + axios:不发送给reducer的操作

By simon at 2018-02-28 • 0人收藏 • 34人看过

我正在构建一个React + Redux应用程序。我正在使用axios来提出API请求。我是 试图做出三个API请求,一个在OT之后她的。第一个需要 完成前第二个可以运行,因为第一个返回一个用户 对象,第二两个你在他们的请求中。 我运行getUser,并且只有与getUser相关的应用程序状态得到更新。但是 其他两个apis不更新应用程序状态,因为他们应该。也不 getUserScores或getCustomerEquations实际上改变状态。从我的g。中 过程I k现在所有的API请求都成功了。从console.log我 知道axios承诺是创造的。 所以对于一些未知的因为我的函数返回的对象不是 使其成为减速器。这里缺少什么? 感谢您的帮助! 指数.js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';   //this is middleware

import App from './containers/app';
import reducers from './reducers/index';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.getElementById('container'));
动作/指数:
import axios from 'axios';

export function getUser(email) {
  let url = 'api/users?user__email=' + email;

  axios.get(url)
      .then((response) => {
        getCustomerEquations(response.data[0].customer);
        getUserScores(response.data[0].id);
      });

  let request = axios.get(url);

  return {
    type: 'GET_USER',
    payload: request
  }
}

export function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;


  let request = axios.get(url);

  return {
    type: 'GET_USER_SCORES',
    payload: request
  };
}

export function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  let request = axios.get(url);

  return {
    type: 'GET_CUSTOMER_EQUATIONS',
    payload: request
  };
}     
减速器/减速,getUserScores:
import React from 'react';
import { GET_USER_SCORES } from '../actions/index';

export default function(state = ["d"], action = {}) {
  switch(action.type) {
    case GET_USER_SCORES:
      // do not manipulate existing state. create a new one
      //ES6 way to write 'return state.concat(action.payload.data);

      console.log('userScores in Reducer:', action.payload.data);
      return action.payload.data;
    default:
      console.log('userScores-Reducer: the case didnt match', action.type);

  }
  return state;
}

3 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

单个动作可能会触发几个状态更改。例如,检查 以下:

function firstReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}

function secondReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}

function thirdReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}
在你的情况下,使用* GET_USER_SCORES_FULFILLED *而不是 * * GETUSERSCORES。因此,切换案例如下:
switch(action.type) {
    case GET_USER_SCORES_FULFILLED:
      // do not manipulate existing state. create a new one
      //ES6 way to write 'return state.concat(action.payload.data);

      console.log('userScores in Reducer:', action.payload.data);
      return action.payload.data;
      break;

    default:
      console.log('userScores-Reducer: the case didnt match', action.type);

  }
检查以下链接,可能会有所帮助。   * [用于使用axios HTTP客户端获取数据的Redux中间件](https://github.com/svrcekmichal/redux-axios-middleware)   * [Redux的Thunk中间件](https://github.com/gaearon/redux-thunk)   * [了解Redux中间件](https://medium.com/@meagle/understanding-87566abcfb7a)

2018-02-28   #2

看起来你不会在actions/index.js文件中返回或等待你的承诺

import axios from 'axios';

export async function getUser(email) {
  let url = 'api/users?user__email=' + email;

  // you are doing it once
  const response = await axios.get(url)
  getCustomerEquations(response.data[0].customer);
  getUserScores(response.data[0].id);

  // why do it again ?
  let request = await axios.get(url);

  return {
    type: 'GET_USER',
    payload: request
  }
}

export async function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;


  let request = await axios.get(url);

  return {
    type: 'GET_USER_SCORES',
    payload: request
  };
}

export async function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  let request = await axios.get(url);

  return {
    type: 'GET_CUSTOMER_EQUATIONS',
    payload: request
  };
}
或者如果你的节点版本不支持异步等待:
import axios from 'axios';

export function getUser(email) {
  let url = 'api/users?user__email=' + email;

  return axios.get(url)
  .then((response) => {
    getCustomerEquations(response.data[0].customer);
    getUserScores(response.data[0].id);
    return axios.get(url).then(request => {
      return {
        type: 'GET_USER',
        payload: request
      };
    });
  });
}

export function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;

  return axios.get(url).then(request => {
    return {
      type: 'GET_USER_SCORES',
      payload: request
    };
  });
}

export function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  return axios.get(url).then(request => {
    return {
      type: 'GET_CUSTOMER_EQUATIONS',
      payload: request
    };
  });
}

2018-02-28   #3

您需要返回一个函数而不是一个动作并分配该动作 只有当您的标准匹配时。你可以试着写你自己的简单中间 中间版本在哪里,或者你可以使用thunk <https://github.com/gaearon /终极版-形实转换>

登录后方可回帖

Loading...