Question

摘要：我正在尝试将函数传递给将调度操作的演示组件。必须在容器中定义第一个参数（一个键）。第二个参数（页码）将在表示组件中提供。我怀疑我做的事情是愚蠢的。

我是新手，请原谅我，如果我的术语关闭或示例不好。这是正在发生的事情：

const mapDispatchToProps = (dispatch) => ({
    changePage: bindActionCreators(changePosts, dispatch)
})

此功能的目的是更改商店中某组帖子的页码。

export const changePage = key => (dispatch, getState) => page => {
    return dispatch(onChangePage(key, page)); //changes the page of the key obj
}

我希望做的是把它传递给一个像这样的表达组件：

<Posts changePage={this.props.changePosts('news') />

现在，在Posts组件中我所要做的就是

<a onClick={this.props.changePage(4)}>4</a>

转到第4页。基本上我告诉演示组件要更改为第4页，但只有在键是“新闻”的地方，我在容器中定义了一个级别。

这不起作用。它不是因为没有传递4，而是代理对象：

[[Handler]]:Object
[[Target]]:SyntheticMouseEvent
[[IsRevoked]]:false

我误解了currying / dispatch的运作方式吗？我真的很感激任何帮助。

编辑：更多代码

// container
class Index extends Component {
    static async getInitialProps({ store, isServer }) {
        await store.dispatch(fetchPosts('news'));
        return { ...store.getState() };
    }

    constructor(props) {
        super(props);
    }

    render() {
        const { nextPage, previousPage, changePage } = this.props;
        const { posts } = this.props.wordpress;
        const { news } = posts;
        return (
            <Main>
                <Posts
                    next={()=>nextPage('news')}
                    previous={()=>previousPage('news')}
                    changePosts={()=>changePage('news')}
                    items={news.items}
                />
            </Main>
        );
    }
}

const mapStateToProps = ({ wordpress }) => ({
    wordpress
})

const mapDispatchToProps = (dispatch) => ({
    fetchPosts: bindActionCreators(fetchPosts, dispatch),
    nextPage: bindActionCreators(nextPosts, dispatch),
    previousPage: bindActionCreators(previousPosts, dispatch),
    changePage: bindActionCreators(changePosts, dispatch)
})

export default withRedux(initStore, mapStateToProps, mapDispatchToProps)(Index);

// actions
export const changePage = key => (dispatch, getState) => page => {
    console.log(page) // this returns a proxy object for some reason
    return dispatch(changePage(key, page));
}

// The only real thing in the presentational component
<a onClick={props.changePosts(4)}>4</a>

Answer 1

1）首先我要提一下你的例子中的mapDispatchToProps看起来有点奇怪，因为如果你为它提供了一个动作对象，你只需要使用bindActionCreators。在您的情况下，很可能是mapDispatchToProps的简单对象形式就足够了：

const mapDispatchToProps = {
    fetchPosts, 
    nextPage,
    previousPage,
    changePage,
};

2）其次，下面这段代码真的很混乱，为什么要递归调度呢？

// actions
export const changePage = key => (dispatch, getState) => page => {
    console.log(page) // this returns a proxy object for some reason
    return dispatch(changePage(key, page));
}

3）最后，如果你已经在代码中的某个地方有一个动作创建者changePage，它接受了key和page，并且它被添加到了mapDispatchToProps，因为我已经前面提到过：

// in your container
<Posts
    ...
    changePosts={page => props.changePage('news', page)}
    ...
/>

// in your component
<a onClick={() => props.onClick(4)}>4</a>

如何使用react / redux来调度调度函数？

1 个答案: