相关疑难解决方法(0)

I have my redux state like this:

{
  parks: [
    {
      _id:"ad1esdad",
      fullName : "Some Name"
    },
    {
      _id:"ad1es3s",
      fullName : "Some Name2"
    }
  ],
  parkInfo: {
    id : "search Id",
    start_time : "Some Time",
    end_time : "Some Time"
  }
}

I have a parkSelector component from which a user selects parkId and start_time and end_time

import React, { Component } from 'react';
import { changeParkInfo } from '../../Actions';

class ParkSelector extends Component {

  constructor(props) {
    super(props);

    this.handleApply = this.handleApply.bind(this); …

我正处于理解 redux 状态管理的学习阶段，并且仍在尝试在令人眼花缭乱的样板代码和中间件丛林中进行谈判，其中大部分我认为是“良药”。所以我希望你能容忍我这个可能是基本的问题。

我知道这redux-thunk允许动作创建者异步进行并在随后的时间调度常规动作。例如，我可以在我的中定义一个 thunk 动作创建者actions.js：

export function startTracking() {
  return (dispatch => {
     someAsyncFunction().then(result => dispatch({
       type: types.SET_TRACKING,
       location: result
     }))
  })
}

并从 React 组件中调用它，如下所示：

onPress={() => this.props.dispatch(actions.startTracking())}

我的问题是，与简单地从异步回调内部调度操作相比，上面的代码有什么优势？

import { store } from '../setupRedux'
...

export function startTracking() {
 someAsyncFunction().then(result => {
   store.dispatch({
     type: types.SET_TRACKING,
     location: result
   })
 })
}

我会在我的组件中调用它

onPress={() => actions.startTracking()}

甚至

onPress={actions.startTracking}

store正如我在第二个示例中所做的那样，通过导入直接访问有什么问题吗？

我一直读到我应该使用 redux-thunk 或 redux-saga 来处理副作用。为什么不简单地使用这样的动作创建者来分派多个动作：

function loadProductActionCreator(dispatch) {
  dispatch({
    type: 'load_product',
  })
  fetch('api/product').then(
    function (r) {
      return r.json();
    }
  )
  .then(function (res) {
    dispatch({
      type: 'loaded_product',
      data: res
    })
  })
}

我试过了，它奏效了（完整的代码）。所以我想一定有一些我不知道的不便之处。

我收到错误"Redux Actions必须是普通对象.使用自定义中间件进行异步操作." 使用以下代码.

export const getFriends = () => async(): Action => {

  const requestConfig = {
    httpMethod: 'GET',
    version: 'v2.7',
  };
  let hasMore = false;
  let friends = [];

  do {
    const infoRequest = new GraphRequest(
    '/me/friends',
    requestConfig,
    (error, result) => {
      if (error) {
        alert('Error fetching data facebook friends');
      } else {
        result.data.forEach((value) => {
            friends.push(value)
        });
        if (result.paging && result.paging.next) {
          hasMore = true;
          requestConfig.parameters.after = result.paging.cursors.after;
        } else {
          hasMore = false;
        }
      }
    });
    await …

我收到一个错误，比如 “操作必须是普通对象”。在使用 React Redux 时，使用自定义中间件进行异步操作 。我正在开发一个具有登录功能的应用程序。这是我的代码。

成分

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import * as AuthActions from '../../actions/AuthAction';
import {blueGrey50,lightBlue500} from 'material-ui/styles/colors';

const style = {
  height: 350,
  width: 370,
  marginLeft: 80,
  marginRight: 380,
  marginTop: 80,
  marginBottom: 50,
  textAlign: 'center',
  display: 'inline-block',
  backgroundColor: blueGrey50,
  paddingTop: 20,
};

const style1 = {
  color: lightBlue500
}; …

抱歉，标题模糊。解释我的问题的最好方法可能是一个例子。

我在redux中有一个项目，并且列表使用标准react-redux连接的组件显示在react组件中。每个单独的项目都有一个按钮，单击该按钮会执行一些异步工作，然后将其从列表中删除，并将其放在其他位置显示的另一个列表中。在redux中处理启动异步工作的逻辑很重要，因为它对我的应用程序的状态很重要。

该基本功能有效，但是现在我想向按钮添加反馈，以便当副作用成功时，它将标签更改为Checkmark（为简单起见，如果请求失败，我将不进行任何操作并保留列表不变）例）。该项目将被选中标记多停留一秒钟，然后再从列表中删除。

问题是，如果我在异步工作完成后立即从列表中删除该项目，则会立即将其卸载，因此我需要延迟该时间。我一直在尝试提出一种方法，以实现可在我的应用程序中重复使用的逻辑，因为我希望在应用程序的其他不相关部分中使用选中标记反馈。

一种简单的解决方案是在成功时调度一个操作，该操作仅更改状态以指示该项目的请求已成功，然后执行setTimeout在1秒后调度另一个操作以实际从列表中删除该项目。

我觉得如果我在有按钮的应用程序的不同位置执行此逻辑，它将变得非常重复。我希望不必为每个需要此按钮的按钮重复超时逻辑。但是我希望我的应用程序显示的内容代表我的应用程序的当前状态。

以前有没有人处理过这样的问题？

谢谢

编辑：我不认为它应该真正改变一般的解决方案，但我正在使用redux循环来处理副作用。我觉得通用解决方案可以与thunk或saga或其他任何东西一起很好地工作。

我想发送一个操作来使用当前登录的用户更新我的应用程序的全局状态.当用户单击一个按钮时,会触发一个事件处理程序mapDispatchToProps,然后我会调度一个action(article.updateAuthor(currentUser)).但是,mapDispatchToProps我无法访问状态以获取当前用户,并且我不想随意将当前已登录的用户传递给组件道具 - 仅传递给上面的click事件,然后传递给用户数据到已分派的操作.

我知道我可以用redux thunk发送一个动作,让我可以访问状态.然而,由于没有进行API调用,因此看起来相当沉重.

有没有人遇到过这个问题？