Redux / 从动作调用调度答案

【问题标题】：Redux / Calling dispatch from an actionRedux / 从动作调用调度
【发布时间】：2020-01-11 18:51:08
【问题描述】：

如何在不从初始调用传递的情况下从动作内部分派动作？我只想删除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));
}

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

您可以使用mapDispatchToProps 并将其作为第二个参数传递给connect 方法。然后你将拥有 dispatch 方法和你的 props。

应该是这样的：

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

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

【讨论】：

哦，是的，这太棒了，谢谢！终于让它工作了。 mapDispatchToProps 和 props.addFile({id: uuidv4(), file}); 成功了。谢谢！

【解决方案2】：

如果您使用的是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)

无需将dispatch 方法作为参数传递。

【讨论】：