React-Redux 不调度动作类型

Question

这是react/redux申请。这是我要完成的基本精简版本。 showFolder() 生成一个文件夹列表和一个按钮以单击它从 FolderActions.js 调用 removeFolder 操作的位置。该按钮有效并将调用 FolderActions.js 中的函数，但不会分派该类型。这些函数可以正常工作，因为我可以看到 console.log 消息，但不会使用 redux..

分派类型

我有一种强烈的感觉，这是我调用函数的方式，但我现在迷路了

import {
  addFolder,
  getFolder,
  removeFolder,

} from "../../../actions/FolderActions";

class Folders extends Component {

  onRemoveFolder = (e,id) => {
    e.preventDefault();
    console.log(id);
    this.props.removeFolder(id);
  };

  showFolders = () => {
    return (
      <ul>
        {this.props.folder.map((key, index) => (          
            <form onSubmit={(e) => this.onRemoveFolder(e,key._id)}>
              <input type="submit"></input>
            </form>
        ))}
      </ul>
    );
  };

  render() {
    let { isShown } = this.state;
    return (
         <div>
          <div className="folder_names">{this.showFolders()}</div>
        </div> 
    );
  }
}
const mapStateToProps = state => {
  return {
    userId: state.auth.user._id,
    folder: state.folder.data
  };
};

export default connect(mapStateToProps, {removeFolder,addFolder,getFolder})(
  Folders
);

FolderActions.js

export const removeFolder = id => dispatch => {
  console.log("called")
  axios
    .delete(`api/folders/${id}`)
    .then(res =>
      dispatch({
        type: DELETE_FOLDER,
        payload: id
      })
    )
    .catch(err => {
      console.log(err);
    });
};

Answer 1

我觉得你的函数调用很奇怪...

您可以尝试定义一个适当的 mapDispatchToProps 并在其中而不是在您的函数中调用 dispatch 吗？

const mapDispatchToProps = dispatch => ({
  removeFolder: (id) => dispatch( removeFolder(id) ),
  addFolder: (id) => dispatch( addFolder(id) ),
  getFolder: (id) => dispatch( getFolder(id) ),
})

export default connect(mapStateToProps, mapDispatchToProps)(
  Folders
);

export const removeFolder = id => {
  // code block
};

我知道这更像是您可能希望的返工，但它有效吗？

Answer 2

如果我错了请纠正我，但我的服务器从未发送过响应。

因为服务器从未发送过响应，所以当我发出请求时，res 不正确，因此无法分派类型和负载。

抱歉浪费了大家的时间！

React-Redux 不调度动作类型

React-Redux not dispatching action type

action

dispatch

reactjs

redux