javascript - 如何用 react/redux 柯里化(Currying)调度函数？

Question

总结:我正在尝试将一个函数传递给一个将分派(dispatch)一个 Action 的展示组件。第一个参数(键)必须在容器中定义。第二个参数(页码)将在展示组件中提供。我怀疑我在做一些愚蠢的事情。

我是新手，所以如果我的术语不正确或示例不佳，请原谅我。这是正在发生的事情:

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)/调度的工作原理？非常感谢任何帮助。

编辑:更多代码

// 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) 最后，如果您的代码中某处已经有一个 Action 创建器 changePage，它接受参数 key 和 page，并且它已添加到 mapDispatchToProps 正如我之前提到的:

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

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