代码之家 › 专栏 › 技术社区 › R. Kohlisch

访问当前状态-最佳实践?

flux react-redux react-native reactjs javascript

R. Kohlisch · 技术社区 · 6 年前

关于Redux,我有点不明白。我有一个应用程序可以浏览项目。您可以转到上一个项目和下一个项目。据我所知,您不应该访问操作中的当前状态。

关于我的应用程序,我有一个处于redux状态的数组,它保存了我项目的所有ID: ["3123123123","1231414151","15315415", etc.] 我有一个国家 currently selected item (或者更好的方法是 身份证件 那个项目)现在当用户单击 nextItem 我要买下一件。我的(未完成的)操作如下:

export function nextItem(currentId) {

  //my idea:
  //take the currentId, look where in the array it is, and get the position
  //increment that position
  //get the id of the next item in the array (at position: position+1)
  //update state

  return {
    type: SET_CURRENT_ITEM,
    payload: item
  }
}

类似的事情也适用于前一个项目操作创建者。但是,我不知道如何在不访问当前状态的情况下实现这个操作创建者?理想情况下在哪里以及如何发生?

3 回复 | 直到 6 年前

Tom Fenech 6 年前

我建议你采取如下行动:

{
    type: INCREMENT_CURRENT_ITEM
}

您可以从任何连接的组件中直接发送:

dispatch({ type: INCREMENT_CURRENT_ITEM })

或者如果你更喜欢使用动作创建者,那也很好:

dispatch(incrementItem()) // incrementItem() returns the action above

在Reducer中,您可以访问当前状态,在该状态下,您可以增加项目索引,而无需在数组中搜索当前值。

Jayffe 6 年前

我可能会添加一个组件,负责通过应用程序增加项目ID。

import react from“react”;
从“redux”导入bindActionCreators;
从“react redux”导入connect;
从“../redux/actions”导入“nexteem”;

const itemnav=(nextitem,items,item)=>。{

函数setNextItem()。{
让currentItemID=items.indexof(item)+1;
如果(currentItemID>=items.length-1)currentItemID=0;
nextitem(项[currentItemID]);
}

返回(
& UL & GT;
<li>上一项</li>
<li onclick=setNextItem>下一项</li>
&L/UL & GT;
;
};

const mapstatetoprops=state=>。({
项目:state.items,
项目:state.item
(});

const mapDispatchTopOps=Dispatch=>bindActionCreators(nexteem,Dispatch);

导出默认连接(
地图状态图,
地图调度Oprops
(ITENav);
< /代码> 


import React from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { nextItem } from "../redux/actions";

const ItemNav = ({ nextItem, items, item }) => {

  function setNextItem() {
    let currentItemID = items.indexOf(item) + 1;
    if (currentItemID >= items.length - 1) currentItemID = 0;
    nextItem(items[currentItemID]);
  }

  return (
    <ul>
      <li>previous item</li>
      <li onClick={setNextItem}>next item</li>
    </ul>
  );
};

const mapStateToProps = state => ({
  items: state.items,
  item: state.item
});

const mapDispatchToProps = dispatch => bindActionCreators({ nextItem },dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ItemNav);

Sirpion 6 年前

The reducer is a pure function 。生产商必须收到相同类型的参数,生产者必须计算状态的版本并返回。没有惊喜。没有副作用。不调用第三方API。无变化(突变)。只有计算新版本的状态。

纯函数-在基本层面上,任何不更改输入不依赖于外部状态(数据库、DOM 或全局变量),并返回相同输入的相同结果数据作为纯函数。

另外,如果值在不同的减速器中,该怎么办?

行动创造者 -也是纯函数,为了计算,我们必须从存储接收数据

成分 -在组件错误实践中使用业务逻辑

留下来 中间件 如果不生产很多中间件,最好使用重铸

此外,链接到类似问题: Redux: Reducer needs state of other Reducer?

以及与第一个发现的项目实现这种情况的链接: https://github.com/rwieruch/favesound-redux/blob/master/src/actions/player/index.js