Reactjs React redux将状态传递给子级

我从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

。如果我在

this.props

组件中登录

CountryFilter

组件，它将返回一个空对象

---

我做错了什么吗？

您的

connect（）

中的第二个参数似乎是一个对象，而不是一个函数，该函数反过来接受

dispatch

作为参数。提到

mapDispatchToProps

。现在

mapDispatchToProps

可以接受一个对象（我相信其中的函数必须是真正的Redux操作创建者），但我通常看到它是通过以下结构完成的：

const mapDispatchToProps = (dispatch) => {
   return {
      foo: () => dispatch(<action>)
   }
}

此外，与发出简单的对象文本（即，

{type:'SET\u FILTER\u 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>
    )
}

减速器

const Reducer = (state = {}, action) => {
    switch(action.type) {
        case 'SET_FILTER_VALUE': {
             return { 
                 ...state,
                 value: action.value
             }
        }
        default: {
            return state;
        }
    }
}

export default Reducer;

---

不幸的是，这不起作用。

onChange

事件不会传播到父组件：

Filter

您还可以为定义存储的位置粘贴代码，并为状态的过滤器部分粘贴减缩器吗？还有@lux，那一点Redux的可怕分解以及它的工作方式。@romemomihalcea只是用sni更新的答案ppet添加到filter的

render（）

。这应该确保我们将道具从filter传递给它的孩子Renawesome@lux，我非常感谢您在这里给出的详细答案和努力

render() {
    const doFilter = this.props.doFilter;
    return (
        <div>
            {
                React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(
                        child, 
                        { doFilter: doFilter }
                    );
                })
            }
        </div>
    )
}

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;