时间戳

首页 > 解决方案 > 如何将一些参数（动态路径）从 mapDispatchToProps 发送到 watcherSaga/workingSaga（中间件）？

reactjs - 如何将一些参数（动态路径）从 mapDispatchToProps 发送到 watcherSaga/workingSaga（中间件）？

问题描述

当有一个动作调用“GET_NODES_ASYNC”时，我只想发送一些额外的参数，我需要将路径连同它一起发送，以便可以将此路径发送到 workingSaga 以通过 watcherSaga 进行 API 调用。但我无法正确发送给我的 watcherSaga


// reactComponent.js

    const mapDispatchToProps = dispatch => {
      return {
        reduxGetNodes: path =>
          dispatch({
            type: "GET_NODES_ASYNC",
            path: "article/path/"   // It comes from an dynamic react component
          })
      };
    };

// watcherSaga.js

    export function* watchNodes(path) {      
          console.log("*******  " + path);       // It comes undefined here  
          yield takeLatest("GET_NODES_ASYNC", nodesAsync, path);
    }

路径没有从 mapDispatchToProps 正确传递到 watcherSaga，因此在 console.log() 上 path = "undefined"。相反，我需要它是“article/pathHere/”

标签： reactjsreact-reduxredux-saga

解决方案

mapDispatchToProps可以访问组件道具作为第二个参数。所以它应该看起来像这样：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    reduxGetNodes: () => {
      const { path } = ownProps;
      dispatch({
        type: "GET_NODES_ASYNC",
        path
      });
    }
  };
};

function* nodeAsync(action) {
    console.log("*******  " + action.path);  
    ...
}

export function* watchNodes() {      
  yield takeLatest("GET_NODES_ASYNC", nodeAsync);
}

推荐阅读