我从React / Redux开始，我有一个类似于子组件的包装器的组件Filter。此过滤器组件具有自己的状态，我想将其传递给它的子元素。
export class Filter extends React.Component {
static propTypes = {
children: PropTypes.node
};
render() {
return <div>{this.props.children}</div>
}
}
const mapStateToProps = function( state ) {
return state.filter;
};
export default connect( (mapStateToProps), {
doFilter: ( event ) => {
return console.log(event.target.value);
}
} )( Filter )
doFilter当值改变时，其中一个孩子应该打电话给：
import Filter from 'components/filter';
....
export class CountryFilter extends React.Component {
render() {
return (
<Filter>
<SelectField floatingLabelText="Country" value='all' fullWidth={true} onChange={this.props.doFilter}>
<MenuItem value='all' primaryText="All"/>
<MenuItem value='de' primaryText="Germany"/>
<MenuItem value='us' primaryText="United States"/>
</SelectField>
</Filter>
);
}
}
问题是doFilter从来没有调用过。如果我this.props在CountryFilter组件内部进行登录，它将返回一个空对象。
难道我做错了什么？
看来您中的第二个参数connect()是一个对象，而不是一个函数，而该函数又接受dispatch作为参数。这是文档中提到的部分mapDispatchToProps。现在mapDispatchToProps可以接受一个对象（并且我相信其中的功能必须是名副其实的Redux动作创建者），但是我通常看到它是通过以下结构完成的：
const mapDispatchToProps = (dispatch) => {
return {
foo: () => dispatch(<action>)
}
}
另外，由于我们绑定dispatch到props，我们很可能想在此处发出与登录控制台相反的操作，但是我怀疑这样做只是出于调试目的。
const mapStateToProps = (state) => {
return {
filter: state.filter
}
};
const mapDispatchToProps = (dispatch) => {
return {
doFilter: (event) => (
dispatch({
type: 'SET_FILTER_VALUE',
value: event.target.value
})
)
}
};
export default connect(
mapStateToProps,
mapDispatchToProps)
(Filter);
此外，除了发出简单的对象文字（即{type: 'SET_FILTER_VALUE', value: event.target.value）外，我们可能还想以动作创建者的形式定义该动作，例如：
actions.js
const SET_FILTER_VALUE = 'SET_FILTER_VALUE';
const setFilterValue = (value) => {
return {
type: SET_FILTER_VALUE,
value
}
}
Filter.jsx
import { setFilterValue } from '../redux/actions';
...
const mapDispatchToProps = (dispatch) => {
return {
doFilter: (event) => (
dispatch(
setFilterValue(event.target.value)
)
)
}
};
...
编辑1
嗯，看来我们也没有将道具从头传递Filter给孩子，因此doFilter/setFilterValue将会是不确定的。我们将使用以下惯用语来确保doFilter将其传递下来。从这里，我们可以将任何希望的东西传递给任何孩子：
筛选
render() {
const doFilter = this.props.doFilter;
return (
<div>
{
React.Children.map(this.props.children, function(child) {
return React.cloneElement(
child,
{ doFilter: doFilter }
);
})
}
</div>
)
}
编辑2
有人要求显示此示例的reducer和store创建外观。它可能如下所示：
店铺创建
import { createStore } from 'redux';
import reducer from './reducer';
const initialState = {};
const store = createStore(reducer, initialState );
console.log(store.getState());
store.dispatch({type: 'SET_FILTER_VALUE', value: 2};
console.log(store.getState());
减速器
const Reducer = (state = {}, action) => {
switch(action.type) {
case 'SET_FILTER_VALUE': {
return {
...state,
value: action.value
}
}
default: {
return state;
}
}
}
export default Reducer;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句