标签: redux-promise

据我所知并纠正我,如果我错了,redux-thunk是一个中间件,它可以帮助我们在动作本身中调度异步函数和调试值,而当我使用redux-promise时,我无法创建异步函数而不实现自己的机制为Action抛出仅调度普通对象的异常.

这两个包之间的主要区别是什么？在单页反应应用中使用这两个包还是坚持使用redux-thunk有什么好处就足够了？

几个月以来,我一直在使用React,Redux.生态系统中最令人困惑的部分之一是异步数据流.有很多很好的解决方案,为您的问题选择合适的解决方案是困难的部分.

在我的应用程序中,动作创建者大多数都有异步axios [ajax]调用我的后端apis.将Redux-Promise注入中间件可以解决异步数据流的问题.

考虑到可扩展的应用程序,我可能需要在我的动作创建者中链接多个axios调用.我想我仍然可以使用Redux-Promise作为中间件,这将在我的应用程序中处理异步数据流.

一般来说,团队更倾向于使用Redux-Thunk,我觉得这个问题的语法更复杂.考虑到我的大多数动作创建者只进行了axios调用(promises),我需要在评估这两个框架时提出建议.我见过的讨论了大量的终极版-咚这里.我明白thunk是如何有用的..但是当我只使用Promises时,我需要更多的澄清来评估Redux-Promise和Redux-Thunk.哪种中间件在这种情况下更好？为什么？使用Redux-Thunk而不是Redux-Promise可以获得哪些优势？或者没有？

所以,我看到一个错误,redux-promise给我回复错误:true,以及有效负载,但是一旦它击中了reducer ...对我来说,解耦请求和错误条件有点奇怪,似乎不当.当使用axios w/reduc-promise(中间件)时,还有一种处理错误情况的有效方法..这里是我所拥有的要点..

in action/
const request = axios(SOME_URL);

return {
   type: GET_ME_STUFF,
   payload: request
}

in reducer/
  const startState = {
     whatever: [],
     error: false
  }

  case GET_ME_STUFF:
     return {...state, startState, {stuff:action.payload.data, error: action.error? true : false}}

等...然后我可以处理错误..所以,我的api调用现在被分成两个单独的区域,这似乎是错误的......我必须在这里找到一些东西.我会想/在/ actions中我可以传递一个回调来处理一个新的动作等等.但是不能拆分它.

我正在尝试发送一个动作.我找到了一些行动的例子,但没有我的那么复杂.

你能给我一个暗示吗？我究竟做错了什么？

我正在使用TypeScript,并且最近删除了所有类型并尽可能地简化了我的代码.

我正在使用redux-thunk和redux-promise,如下所示:

import { save } from 'redux-localstorage-simple';
import thunkMiddleware from 'redux-thunk';
import promiseMiddleware from 'redux-promise';

const middlewares = [
        save(),
        thunkMiddleware,
        promiseMiddleware,
    ];
const store = createStore(
        rootReducer(appReducer),
        initialState,
        compose(
            applyMiddleware(...middlewares),
            window['__REDUX_DEVTOOLS_EXTENSION__'] ? window['__REDUX_DEVTOOLS_EXTENSION__']() : f => f,
        ),
    );

组件 - Foo组件:

import actionFoo from 'js/actions/actionFoo';
import React, { Component } from 'react';
import { connect } from 'react-redux';

class Foo {
    constructor(props) {
        super(props);
        this._handleSubmit = this._handleSubmit.bind(this);
    }
    _handleSubmit(e) {
        e.preventDefault();
        this.props.doActionFoo().then(() => {
            // …

因此，我刚刚阅读了Redux中间件，听起来很棒。有一件事正在困扰我-中间件的返回值。

据我了解，中间件回报的东西（即某些情况下redux-promise我），并获得其他中间件（即logging）不- ，只是返回的结果next(action)。

我的问题是，如果我想使用两个都返回内容的中间件，那将会发生什么-当然，它们会互相破坏，而我只会得到最外部中间件的返回值。

express/connect中间件这个地址通过让中间件写入其“成果”的req和res对象，但什么与终极版的解决方案？

编辑

这是我的问题的一个更具体的例子：

我有两个中间件：

1. 延迟3秒分派所有动作的中间件。该中间件返回一个可以调用以取消调度的函数
2. 返回数字5的中间件，因为出于某种原因我需要数字5。

根据我链接中间件的这两个位的顺序，我的结果dispatch(action)将是延迟取消fn或数字5。但是如何获得这两个结果？

我使用过Redux Promise,但似乎Redux Promise Middleware具有更多功能,例如通过附加"PENDING"或"FULFILLED"来调度多个动作.

为什么我会使用一个而不是另一个？

我使用redux-actions和redux-promise-middleware来分派动作,以及TypeScript 2.1以获得async await支持.

这是一个使用redux-actions和的动作redux-promise-middleware

// create an async action
const fooAction = createAction('FOO', async () => {
  const { response } = await asyncFoo();
  return response;
});

// use async action
fooAction('123')

这是动作链的一个例子,仅使用 redux-promise-middleware

const foo = () => dispatch => {
  return dispatch({
    type: 'TYPE',
    payload: new Promise()
  })
  .then(() => dispatch(bar()));
}

如何链接redux-promise-middleware可以与redux-actions？一起使用？

我搜索过高低，但找不到明确的答案。

我设法将注意力集中在Redux的机制上，但是当我谈到API调用和异步操作创建者时，我就​​在Promises的上下文中停留在中间件上。

你能帮我弄好乱子吗？

这个难题的矛盾部分让我头疼：

1. YT教程之一说，本机Redux分派方法不支持从动作创建者返回的诺言-因此需要Redux Promise库（我知道该项目现在可能已经死了，并且继续是Redux Promise中间件）。

2. Dan在“ redux-thunk和redux-promise之间有什么区别？ ”中说，即使没有中间件，我也可以使用诺言-只需在动作创建者中对其进行管理即可。

3. 在其他答案中，我找到了使用thunk的示例，其中动作创建者返回了一个... promise（后来在调用者中处理/ dispatch（myActionCreator（params）.then（...） /所以一个promise 可以由a返回）没有任何redux-promise lib的thunk 。

4. 在“ redux-thunk和redux-promise之间有什么区别？ ”中，接受的答案指出Redux Thunk返回函数，而Redux Promise返回promise ..到底是什么？

总结一下：使用Redux Promise或Redux Promise中间件有什么意义？为什么仅Redux不能原生支持诺言？

更新：

我刚刚意识到，在3点以上我忽略then()被连接到dispatch不包括在dispatch()ARGS。

我很难搞清楚为什么会发生这种情况,但基本上Redux Promise对我来说很好,同时返回的内容如下:

    return {
      type: STORY_ACTIONS.STORY_SPOTIFY_REQUEST,
      payload: request
    }

但是,我现在需要像这样传递另一个信息

    return {
     order: 0, // New field
     type: STORY_ACTIONS.STORY_SPOTIFY_REQUEST,
     payload: request
    }

这导致未解决的承诺而不是数据.我尝试重命名order为position或者index......仍然没有.

我有React路由器的Redux应用程序(基于https://github.com/este/este).

在一个Route中,可能有多个AJAX调用(由redux-promise-middleware&触发redux-thunk).当页面改变(通过react-router)时,我希望拒绝前一个路由触发的所有剩余_SUCESS或_FAILED回调 actions.

做这个的最好方式是什么？

我想使用redux建模以下异步逻辑:

1. 用户操作会触发一系列异步API调用.
2. 任何API调用都可能返回401状态(登录超时)
3. 如果API以401响应,则显示重新登录弹出窗口
4. 成功重新登录后,重新发出API调用并继续

我不知道在哪里放这个逻辑.操作不了解其他操作,他们只能访问调度,因此他们无法停止并等待它们完成.减速器无法发送,所以我不能把它放在那里......所以它住在哪里？自定义中间件？store.listen？在智能组件？

我目前正在使用redux-promise-middleware和redux-thunk.如何最好地组织这种类型的流程 - 不需要买入像redux-saga或redux-rx等那样的东西？

还不确定透明地中断API调用以执行其他操作的最佳方法,即API调用不应在可选登录过程完成之后触发其已完成或失败的操作.

我想在我的动作生成器中添加一个 isLoading 标志并在我的减速器上重置它。最初没有标志，我的代码工作，动作如下所示

export function getList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_LIST, 
        payload: request,
    }
}

和减速机看起来像

const INITIAL_STATE = { all: [], id: -1, isLoading: false };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case FETCH_COMIC_LIST: 
            console.log('reducer action =', action, 'state =', state)
            return {
                ...state, 
                all: action.payload.data.data.results,
                isLoading: false …

我想通过使用redux和发送一些数据到PHP脚本,promise如下所示.

export function fetchFileContent() {
    return {
        type: "FETCH_FILECONTENT",
        payload: axios.post("/api/ide/read-file.php", {
            filePath: document.getArgByIndex(0)[0]
        })
    };
}

但是php脚本无法接收数据.当我打印的所有数据$_POST使用var_dump.里面什么都没有.

我在Google Chrome调试工具中查看了" 请求有效负载 ",这似乎没问题.

在我的PHP脚本中:

if (isset($_POST["filePath"])) 
    echo "yes"; 
else 
    echo "no";
echo "I am the correct file";
var_dump($_POST["filePath"]);

$dir = $_POST['filePath'];
echo $_POST['filePath'];

我收到了这个回复:

noI am the correct file<br />
<b>Notice</b>:  Undefined index: filePath in <b>/var/www/html/api/ide/read-file.php</b> on line <b>7</b><br />
NULL
<br />
<b>Notice</b>:  Undefined index: filePath in <b>/var/www/html/api/ide/read-file.php</b> on line <b>9</b><br /> …