Redux：访问当前状态 - 最佳实践？

Question

这是我对 Redux 不理解的地方。我有一个通过项目的应用程序。您可以转到上一个项目和下一个项目。据我了解，您不应该在您的操作中访问当前状态。

关于我的应用程序，我的 redux 状态中有一个数组，其中包含我的项目的所有 ID：["3123123123","1231414151","15315415", etc.] 并且我有一个状态包含 currently selected item（或更好，它包含该项目的 id）。现在，当用户单击 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
  }
}

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

Answer 1

我建议您发出如下操作：

{
    type: INCREMENT_CURRENT_ITEM
}

您可以直接从任何连接的组件中调度它：

dispatch({ type: INCREMENT_CURRENT_ITEM })

或者，如果您更喜欢使用动作创建器，那也很好：

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

在你的 reducer 中，你可以访问当前状态，你可以在其中增加项目索引，而无需在数组中搜索当前值。

Answer 2

我可能会添加一个组件，负责通过应用递增的项目 ID

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);

Answer 3

The reducer is a pure function。生产者必须收到相同类型的参数，生产者必须计算新的状态的版本和 return 它。没有惊喜。无副作用。不调用第三方 API。没有变化（突变）。只有新版本计算状态。

Pure function - At the fundamental level, any function that does not change the input does not depend on the external state (database, DOM or global variable) and returns the same result for the same input data as a pure function.

此外，如果值在不同的reducer中，怎么办？

Action creators - 也是纯函数，为了计算我们必须从商店接收数据

组件 - 在组件中使用业务逻辑的不良做法

保留中间件并且不要生产很多中间件，最好是使用 redux-thunk

此外，link一个类似的问题： Redux: Reducer needs state of other Reducer?

并且 link 到第一个发现的实现这种情况的项目： https://github.com/rwieruch/favesound-redux/blob/master/src/actions/player/index.js

Redux：访问当前状态 - 最佳实践？

Redux: Accessing current state - best practice?

javascript

flux

reactjs

react-native

react-redux