react无法将参数放入函数(redux)中

Question

rootReducer

import { combineReducers } from "redux";
import mods from "./mods.js";
export default combineReducers({
mods
})

减速器/mods.js

import { GET_MODS, GET_SPECIFC_MOD } from "../actions/types"
const initialState = {
mods: [],
currMod: []
}
export default function(state = initialState, action) {
switch(action.type) {

case GET_MODS:
return {
...state,
mods: action.payload
}
case GET_SPECIFC_MOD:
return {
...state,
currMod: action.payload
}
default:
return state
}
}

操作/mods.js

import axios from 'axios'
import { GET_MODS, GET_SPECIFC_MOD } from './types'
// get the mods
export const getMods = () => dispatch => {
axios.get('http://localhost:8000/api/mods')
.then(res => {
dispatch({
type: GET_MODS,
payload: res.data
})
}).catch(err => console.log(err))
}
// get single mod
export const getSpecificMod = (title) => dispatch => {
axios.get(`http://localhost:8000/api/mods/${title}`)
.then(res => {
dispatch({
type: GET_SPECIFC_MOD,
payload: res.data
})
}).catch(err => console.log(err))
}

components/download.js

import React from 'react'
import { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { getSpecificMod } from '../actions/mods'
const Download = () => {
useEffect(() => {
const title = window.location.pathname.split('/')[3]
getSpecificMod(title)
})
return (
<></>
)
}
const mapStateToProp = state => ({
currMod: state.mods.currMod
})
export default connect(mapStateToProp, getSpecificMod)(Download)

来自后端的响应

GET http://localhost:8000/api/mods/function(){return!window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__&&a.dispatch.apply(a,arguments)}

基本上，用户点击一个mod，然后被发送到由"download.js"处理的下载部分，组件("download.jss")会渲染它并读取窗口。位置以检索标题，使用redux，我想获得mod，所以我制作了一个函数来获取标题并发送请求"getMod(title)"，但由于某种原因，它引发了我不理解的可怕错误，感谢您的帮助！

Answer 1

您没有在组件中正确调度操作。现在您实际上只是从导入中调用getSpecificMod动作创建者函数。您的Download组件不会从props中读取任何内容，因此它忽略了connectHOC创建的所有内容。

如果你想继续使用connect，你可以这样修复：

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { getSpecificMod } from '../actions/mods'
const Download = ({currMod, getSpecificMod}) => {
const title = window.location.pathname.split('/')[3]
useEffect(() => {
getSpecificMod(title)
}, [title])
return (
<></>
)
}
const mapStateToProps = state => ({
currMod: state.mods.currMod
})
export default connect(mapStateToProps, {getSpecificMod})(Download)

我们现在正在访问绑定的动作创建者作为组件的道具。mapDispatchToProps是一个将属性键映射到动作的对象。

但最好使用useDispatch挂钩：

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getSpecificMod } from '../actions/mods'
const Download = () => {
const currentMod = useSelector(state => state.mods.currMod);
const dispatch = useDispatch();
const title = window.location.pathname.split('/')[3]
useEffect(() => {
dispatch(getSpecificMod(title));
}, [title, dispatch]);
return (
<></>
)
}
export default Download;

这里的术语可能有些混乱。您的getSpecificMod函数是一个以dispatch为自变量的函数，但它不是mapDispatchToProps。它是一个暴徒行动的创造者。

确保您安装了redux-thunk中间件，以便处理这种类型的操作。或者更好的是，使用redux工具包。

---

您的useEffect钩子需要某种依赖关系，以便知道何时运行。如果只想运行一次，可以使用空数组[]作为依赖项。如果根本不指定依赖项，则它将在每次渲染时重新运行。

pathname有变化吗？如果是，你怎么知道什么时候？您可能希望在window对象上添加一个事件侦听器。或者考虑使用react路由器之类的东西。但这是一个单独的问题。