Question

情况是我正在创建一个单独的电路板，它将保存一组便条卡（每个音符都有一个ID，标题和正文），每张便条卡都有一个按钮来删除它。此外，应用程序将与firebase同步，因此我的主要问题是如何将参数传递给中间件并在mapDispatchToProps中执行。以下是我的代码，指出我在中间件方面的成功以及我目前被阻止的位置。

为了在启动时保护应用程序，我发送了一个中间件函数，它从firebase获取数据，然后调度reducers处理的动作，最后由容器/表示组件更新。

中间件功能：

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});
    });
}

容器组件：

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

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

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

到目前为止一直很好，这是我添加到相同的中间件和容器组件文件来处理删除方案。

中间件功能：

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

容器组件：

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

问题是deleteNote在启动时不停调用，我甚至不需要点击按钮。我知道所提供的代码可能没有一大堆意义，但问题的关键在于我需要在用户点击按钮时将id传递给中间件函数，并且因为我＆＃ 39; m将该函数作为道具传递，由于某些原因，它决定只调用它一百万次。

我可以在演示组件中调用boardMiddleware.deleteNote函数，就像官方redux页面中的示例一样，但是我想知道是否有办法按照我尝试的方式进行操作去做。我还想过将参数绑定到中间件函数中，但这也感觉不对，像这样

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

提前感谢您的帮助！

如何将参数传递给mapDispatchToProps中的React Redux中间件

0 个答案: