I use Redux和React构建我的网站,想使用Redux控制侧边栏的显示。该侧边栏由Semantic-UI-React定义。因为我想跨另一个组件来控制它,所以我在侧边栏的父组件中定义了props:
此外,我的商店代码是:
然后,我的组件代码(部分):
最后,我的路由器:
所以,我搜索了这个错误的答案,大多数人都说,你必须设置redux-thunk并使用ApplyMiddleware来使用它,这是最简单的方法。但我定义的操作是纯对象。如果我不使用redux-thunk,我认为我也不会遇到这个错误。所以,我很困惑,如何解决这个问题?
感谢所有的帮助。
const { visible, dispatch } = this.props
,并有一个onClick函数来处理它。以下是我的代码。
这个错误困扰了我一个下午,我不知道为什么!以下是我的操作代码:未捕获的错误:操作必须是纯对象。使用自定义中间件进行异步操作。
**action**
export const SIDEBARISVISIBLE = 'sidebarVisible'
export function sidebarVisibleAction() {
return { type: SIDEBARISVISIBLE }
}
如您所见,我定义了一个返回纯对象的动作创建器。
以下是我的 reducer 代码:
**reducer**
import SIDEBARISVISIBLE from '../actions/outside.js'
function sidebarVisible(state = {
sidebarIsVisible: false
}, action) {
switch (action.type) {
case SIDEBARISVISIBLE:
return Object.assign({}, state, {
sidebarIsVisible: !state.sidebarIsVisible
})
default:
return state
}
}
export default sidebarVisible
此外,我的商店代码是:
**store**
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import sidebarVisible from '../reducers/outside.js'
export default initialState => {
return createStore(
sidebarVisible,
initialState,
applyMiddleware(thunk)
)
}
然后,我的组件代码(部分):
class OutsideView extends Component {
constructor(props) {
super(props)
this.state = { activeItem: '' }
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
const { visible, dispatch } = this.props
return (
<div>
<SidebarNav visible={ visible } />
......
<Menu.Item
name='sidebar'
active={ activeItem === 'sidebar'}
onClick={ (e, {name}) => {
this.setState({ activeItem: name })
dispatch(sidebarVisibleAction)
} }>
<Icon color='red' name='list' />
</Menu.Item>
OutsideView.PropTypes = {
visible: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
visible: state.sidebarIsVisible,
}
}
export default connect(
mapStateToProps
)(OutsideView)
最后,我的路由器:
import configureStore from './store/index.js'
const store = configureStore()
export default class Root extends Component {
render() {
return (
<Provider store={ store }>
<Router history={ browserHistory }>
<Route path="/" component={ OutsideRedux }>
<Route path='register' component={ Register } />
<Route path='login' component={ Login } />
<Route path='blog' component={ Blog } />
<Route path='about' component={ About } />
<Route path='home' component={ Home } />
<Route path='ask' component={ Ask } />
<Route path='panel' component={ Panel } />
<Route path='setting' component={ Setting } />
<Route path='user' component={ User } />
</Route>
</Router>
</Provider>
)
}
}
所以,我搜索了这个错误的答案,大多数人都说,你必须设置redux-thunk并使用ApplyMiddleware来使用它,这是最简单的方法。但我定义的操作是纯对象。如果我不使用redux-thunk,我认为我也不会遇到这个错误。所以,我很困惑,如何解决这个问题?
感谢所有的帮助。
dispatch
?你应该在connect
中使用mapDispatchToProps
并将动作作为this.props.actionName
获取。只需确保使用道具版本而不是导入的版本即可。我也犯过这个错误太多次了:D - Marko Gresakdispatch
,因此我没有看到错误,但是@nobody找到了答案。但是我建议的仍然可以工作,因为mapDispatchToProps
将操作包装为调度调用,因此您可以将操作用作常规函数,并省略dispatch(action(args))
语法,而选择我认为更清晰的action(args)
调用。 - Marko Gresak