Reactjs 如何在mapDispatchToProps内传递参数以反应Redux中间件

情况是，我正在创建一个单板，其中将包含一组注释卡（每个注释都有一个id、标题和正文），每个注释卡都有一个删除按钮。此外，该应用程序将与firebase同步，因此我的主要问题是如何将参数传递给中间件，并在mapDispatchToProps中执行。下面是我的代码，它指出了我在中间件方面的成功之处，以及我目前被阻止的地方

为了在应用程序启动时添加水合物，我调度了一个中间件函数，该函数从firebase获取数据，然后调度由还原程序处理的操作，最后由容器/表示组件进行更新

中间件功能：

export function hydrateApp(dispatch) {
    dispatch({type: 'PENDING'});
    fireBaseDBRef.once('value').then(snapshot => {
        let firebaseNotes = snapshot.val()
        let notes = [];
        // populate notes using firebaseNotes, nothing exciting
        dispatch({ type: 'DONE', notes: notes });
        // the 'DONE' action.type is handled by the reducer and passes data
        // to the container component successfully
    }).catch(e => {
        dispatch({type: 'ERROR', error: e});
    });
}

export function deleteNote(id) {
    return (dispatch) => {
       dispatch({type: 'PENDING'});
       //firebase stuff happening here
       dispatch((type: 'DONE'});
    }
}

容器组件：

const mapStateToProps = state => {
    return { 
        notes: state.boardReducer.notes
    };
};

const mapDispatchToProps = dispatch => {
    return {
        addNote: () => {
            dispatch(boardMiddleware.createNote);
        }
    };
};

const BoardContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(BoardPresentation);

const mapDispatchToProps = dispatch => {
    return {
        addNote: () => {
            dispatch(boardMiddleware.createNote);
        },
        removeNote: (id) => {
            dispatch(boardMiddleware.deleteNote(id));
        }
    };
};

到目前为止还不错，这就是我添加到相同中间件和容器组件文件中以处理删除场景的内容

中间件功能：

export function hydrateApp(dispatch) {
    dispatch({type: 'PENDING'});
    fireBaseDBRef.once('value').then(snapshot => {
        let firebaseNotes = snapshot.val()
        let notes = [];
        // populate notes using firebaseNotes, nothing exciting
        dispatch({ type: 'DONE', notes: notes });
        // the 'DONE' action.type is handled by the reducer and passes data
        // to the container component successfully
    }).catch(e => {
        dispatch({type: 'ERROR', error: e});
    });
}

export function deleteNote(id) {
    return (dispatch) => {
       dispatch({type: 'PENDING'});
       //firebase stuff happening here
       dispatch((type: 'DONE'});
    }
}

容器组件：

const mapStateToProps = state => {
    return { 
        notes: state.boardReducer.notes
    };
};

const mapDispatchToProps = dispatch => {
    return {
        addNote: () => {
            dispatch(boardMiddleware.createNote);
        }
    };
};

const BoardContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(BoardPresentation);

const mapDispatchToProps = dispatch => {
    return {
        addNote: () => {
            dispatch(boardMiddleware.createNote);
        },
        removeNote: (id) => {
            dispatch(boardMiddleware.deleteNote(id));
        }
    };
};

问题是deleteNote在启动时会被不间断地调用，我甚至不需要单击按钮。 我知道给出的代码可能没有什么意义，但我问题的关键是，当用户单击按钮时，我需要知道如何将

id

传递给中间件函数，因为我将函数作为道具传递，它出于某些原因决定只调用它一百万次

我可以调用演示组件中的

boardMiddleware.deleteNote

函数，就像官方redux页面中的示例一样，但我想知道是否有一种方法可以像我尝试的那样实现它。 我还考虑过将参数绑定到中间件函数中，但这也感觉不对，类似这样

removeNote: (id) => {
     dispatch(boardMiddleware.deleteNote.bind(id));
} 

---

提前谢谢你的帮助

Try:

dispatch（（）=>boardMiddleware.deleteNote（id））

onClick的

处理程序是什么样子的？听起来它可能不是一个函数，而是一个调用，例如
onClick={this.props.deleteNote（someId）}
onClick

处理程序只使用

this.props.removeNote

您的“中间件函数”只是一个动作创建者。你可能混淆了一些概念。中间件用于在操作到达减速器之前捕获操作，并运行日志记录等副作用。