Redux /操作中的呼叫调度

时间:2020-01-11 18:51:08

标签: reactjs redux redux-thunk

如何在不从初始调用传递过来的情况下从操作中分派操作?我只想删除props.dispatch,但无法正常工作。 已经在使用redux-thunk了,我是新来的人。我的版本可以用,但我猜不是最好的。

<Files
    onDrop={file => {
        props.dispatch(addFile(props.dispatch, {id: uuidv4(), file}));
    }}
/>

actions.js:

// addFile
export function addFile(
    dispatch,
    {
        id = uuidv4(),
        file = [],
    } = {}
) {
    doSomething(dispatch, id);
    return {
        type: 'ADD_FILE',
        payload: {
            id,
            file,
        },
    };
}

// doSomething
function doSomething(dispatch, id) {
    dispatch(callOtherAction(id));
}

2 个答案:

答案 0 :(得分:0)

您可以使用mapDispatchToProps并将其作为第二个参数传递给connect方法。 然后您将拥有调度方法和道具。

应该看起来像这样:

const mapDispathToProps = dispatch => ({
    addFileAction: (file) => addFile(dispatch, file)
})
export default connect(null, mapDispathToProps)(Component);

您的addFile操作现在也可以将分派传递给其他操作。

答案 1 :(得分:0)

如果您使用的是sudo sh -c 'modprobe -r iwlwifi && modepobe iwlwifi 11n_disable=1',则您的操作可能如下所示:

redux-thunk

无需传递// actions.js export function addFile(id = uuidv4(), file = []) { return dispatch => { dispatch(doSomething(id)); dispatch({ type: 'ADD_FILE', payload: { id, file, }, }); } } function doSomething(id) { return dispatch => { dispatch(callOtherAction(id)); } } // component.js import { addFile } from './actions.js'; const YourComponent = ({ addFile }) => <button onClick={() => addFile(id, file)}>Add File</button>; export default connect(null, { addFile })(YourComponent) 方法作为参数。