代码之家 › 专栏 › 技术社区 › user

redux-将ownprops参数传递给选择器

reselect react-redux redux

4

user · 技术社区 · 6 年前

我不能传递变量 ownProps 从 mapStateToProps 到选择器。我的选择器:

export const nameSelector = createSelector(
    [
        state => state.element.get('name')
    ],
    (name) => !name.trim()
);

const mapStateToProps = (state, ownProps) => ({
    disabledAfterSave: nameSelector(state)
});

我需要一个选择器:

export const nameSelector = createSelector(
        [
            state => state.element.get('name')
        ],
        (name, ownProps) => !name.trim() && ownProps.showMessage
    );

const mapStateToProps = (state, ownProps) => ({
    disabledAfterSave: nameSelector(state, ownProps)
});

但现在我得到一个错误: ReferenceError: ownProps is not defined

当我试图传递它时,如下所示:

export const nameSelector = (ownProps) => createSelector(
        [
            state => state.element.get('name')
        ],
        (name) => !name.trim() && ownProps.showMessage
    );

返回的类型不是bool,而是 [Function selector] . 如何将此参数传递给选择器?

1 回复 | 直到 6 年前

1

4

Jordan Enev 6 年前

下面介绍如何修复选择器及其用法 :

export const nameSelector = createSelector(
  [
    state => state.element.get('name'),
    (state, ownProps) => ownProps.showMessage
  ],
  (name, showMessage) => !name.trim() && ownProps.showMessage
)

const mapStateToProps = (state, ownProps) => ({
  disabledAfterSave: nameSelector(state, ownProps)
})

下面是一个通用的工作示例,以说明如何将props传递给选择器 :

const createSelector = Reselect.createSelector

// Selector: Get Active Users
const getUsers = createSelector([state => state.users], users => users.filter(u => u.active))

// Selector: Get Active Users by Country
// Here you can check how I pass the country prop
const getUsersByCountry = createSelector([getUsers, (state, props) => props.country],
 (users, country) => users.filter(u => u.country === country))

// The state
const state = {
  users: [
    { id: 1, name: 'Jordan', country: 'Bulgaria', active: true},
    { id: 2, name: 'Nadezhda', country: 'Bulgaria', active: true},
    { id: 3, name: 'Hristo', country: 'Bulgaria', active: false},
    { id: 4, name: 'Bobby', country: 'England', active: true},
    { id: 5, name: 'Kaloyan', country: 'Germany', active: true},
  ]
}

// Testing
console.log(getUsers(state))
console.log(getUsersByCountry(state, { country: 'Bulgaria' }))

<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.min.js"></script>