Question

我从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进行登录，则返回一个空对象。

我做错了吗？

Answer 1

看起来connect()中的第二个参数是一个对象，而不是一个函数，而函数又接受dispatch作为参数。提到mapDispatchToProps的{{3}}。现在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);

此外，我们可能希望以Here's the part of the doc的形式定义此操作，而不是发出简单的对象文字（即{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

有一个请求显示减少器和存储创建如何查找此示例。它可能如下所示：

商店创建

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;

React redux将状态传递给子节点

1 个答案: