reactjs-Redux中的选择器是什么?

我试图在getUser中遵循此代码

export const getUser = (state, login) => state.entities.users[login]
export const getRepo = (state, fullName) => state.entities.repos[fullName]

然后像这样在传奇中使用它:

import { getUser } from '../reducers/selectors'

// load user unless it is cached
function* loadUser(login, requiredFields) {
  const user = yield select(getUser, login)
  if (!user || requiredFields.some(key => !user.hasOwnProperty(key))) {
    yield call(fetchUser, login)
  }
}

这个getUser减速器(甚至是减速器)看起来与我通常期望的减速器看起来非常不同。

谁能解释选择器是什么,以及getUser是减速器,以及它如何与redux-saga配合使用?

dagda1 asked 2020-07-28T08:24:56Z
4个解决方案
61 votes

users不是减速器,它实际上是选择器,即知道如何从存储中提取特定数据的函数。

选择器提供了额外的一层,这样,如果您更改了商店结构,突然之间,您的users不再位于state.entities.users,而是变为state.users.objects.entities(或任何其他位置),则只需要更新getUser选择器,而不是更新应用程序中的每个位置 您正在参考旧位置。

这使得它们在重构Redux存储时特别方便。

horyd answered 2020-07-28T08:25:20Z
13 votes

选择器是redux状态的吸气剂。 像getter一样,选择器封装了状态的结构,并且是可重用的。 选择器还可以计算派生的属性。

您可以编写选择器,例如在redux-saga中看到的选择器。 例如:

const getUsersNumber = ({ users }) => users.length;

const getUsersIds = ({ users }) => users.map(({ id }) => id);

等等...

您还可以使用reselect,这是Redux的简单“选择器”库,用于记忆选择器以提高选择效率。

Ori Drori answered 2020-07-28T08:25:53Z
2 votes

选择器是将Redux状态作为参数并返回一些数据以传递给组件的函数。

const getUserData = state => state.user.data;

为什么要使用它?

  1. 主要原因之一是避免在Redux中重复数据。
  2. 数据对象的形状随应用程序的增长而变化,因此不要在所有相关组件中进行更改。强烈建议/更轻松地在一个位置更改数据。
  3. 选择器应位于减速器附近,因为它们在相同状态下运行。 数据保持同步更容易。

使用reselect有助于记住数据的含义,即在将相同的输入传递给函数时,它返回前一个结果而不是重新进行计算。因此,这可以提高应用程序性能。

CodeZombie answered 2020-07-28T08:26:36Z
2 votes
function mapStateToProps (state) {
    return {
        user: state.user,
    }
}

initialState of reducer by user store
const initialState = {
  isAdmin:false,
  isAuth:false,
  access:[1,2,5]
};

class AppComp extends React.Component{
render(){
        const {user: { access:access}} = this.props;
        const rand = Math.floor(Math.random()*4000)
        return (<div>
            {`APP ${rand} `}
    <input type="button" defaultValue="change auth" onClick={this.onChangeUserAuth} />
        <p>TOTAL STATUS COUNT IS {access.length}</p>
        </div>)
    }
}}

但是你可以使用选择器

var getUser = function(state) {
    return state.user
}


const getAuthProp = createSelector(
    getUser,
    (user) => user.access
);


function mapStateToProps (state) {
    return {
       // user: state.user,
        access: getAuthProp(state)
    }
}

主要问题是此组件使用所有用户:state.user以及用户中的任何更改(例如isAdmin,isAuth,access)都会重新呈现此组件,而该组件仅需要该存储的一部分-访问!!!

在Redux中,只要在应用程序中的任何位置调用了操作, 所有已安装和连接的组件都调用其mapStateToProps 功能。 这就是为什么Reselect很棒。 它只会返回 记忆的结果,如果没有任何变化。

在现实世界中,您很可能需要 您的状态对象有多个组成部分。

[HTTPS://medium.com/@Parker但/react-reselect-安定-热镀锌-不34017发8194从]

Reselect提供的createSelector函数实现了从以前的选择器派生选择器的最基本方法。 最简单的用例是从单个其他选择器派生一个选择器。 在这种情况下,createSelector的参数是输入选择器和一个将该选择器的结果转换为新选择器的结果的函数。 例如

var getProducts = function(state) {
    return state.products
}


import {getProducts} from '../app/selectors'
import {createSelector} from 'reselect'

export const getProductTitles = createSelector(
    getProducts,
    (products) => products.map((product) => product.get('title'))
)

这等效于(忽略记忆):

import {getProducts} from '../app/selectors'

export const getProductTitles = (state) => {
    return getProducts(state).map((product) => product.get('title'))
}

createSelector函数可以合并来自多个选择器以及单个选择器的数据。 我们可以将任意数量的选择器传递给createSelector,它们的结果将传递给作为最终参数传递的函数。 对于(有些人为的)示例:

const isInCheckout = createSelector(
    getIsShippingPage,
    getIsBillingPage,
    getIsConfirmationPage,
    (isShipping, isBilling, isConfirmation) =>
        isShipping || isBilling || isConfirmation
)

相当于

const isInCheckout = (state) => {
    return (
        getIsShippingPage(state) ||
        getIsBilingPage(state) ||
        getIsConfirmationPage(state)
    )
}

使用选择器编写mapStateToProps函数时的常见模式是返回一个对象,每个键都存储特定选择器的结果。 Reselect中的createStructuredSelector辅助函数使我们可以用最少的样板编写此模式。 例如,如果我们写

const mapStateToProps = createStructuredSelector({
    title: getProductTitle,
    price: getProductPrice,
    image: getProductImage
})

它等效于

const mapStateToProps = (state) => {
    return {
        title: getProductTitle(state),
        price: getProductPrice(state),
        image: getProductImage(state)
    }
}

[HTTPS://docs.末笔费用.com/progressive-Web/0.15.0/guides/reselect/]

zloctb answered 2020-07-28T08:27:45Z
translate from https://stackoverflow.com:/questions/38674200/what-are-selectors-in-redux