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、访问)运行重新渲染该组件,该组件只需要该商店的一部分 - 访问!
在 Redux 中,无论何时在应用程序的任何位置调用操作,所有已安装和连接的组件都会调用它们的 mapStateToProps 函数。这就是 Reselect 很棒的原因。如果没有任何变化,它只会返回记忆的结果。
在现实世界中,您很可能需要多个组件中状态对象的相同特定部分。
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
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.mobify.com/progressive-web/0.15.0/guides/reselect/