Redux Action没有被解雇

问题描述：

我已经用Relay，Redux和GraphQL设置了一个应用程序。当我火的动作，以显示下拉状态不更新（当我使用反应 - 终极版devtools派遣行动的状态更新。）我有以下作用：Redux Action没有被解雇

export function showDropdown() { 
    return { 
    type: SHOW_DROPDOWN, 
    dropdownType: PROFILE_SETTINGS, 
    dropdownProps: {} 
    }                            
}

及以下成分

import React from 'react'; 
import { connect } from 'react-redux'; 

import { showDropdown } from '../../redux/actions/dropdownActions'; 

function StreamWidget() { 
    const onClickHandler =() => { 
    this.props.showDropdown(); 
} 

return (
    <div> 
    <a 
     href='#' 
     role='button' 
     onClick={ onClickHandler } 
    /> 
    </div> 
); 
} 
export default connect(null, { showDropdown })(StreamWidget);

当我点击链接我得到 Uncaught TypeError: Cannot read property 'showDropdown' of undefined

，当我改变this.props.showDropdown()到showDropdown()我没有得到错误，但没有任何反应STO重新不更新。

我欢迎所有关于如何解决此问题的建议。三江源

// Router 
const Router = createFarceRouter({ 
    historyProtocol: new BrowserProtocol(), 
    historyMiddlewares: [queryMiddleware], 
    routeConfig: routes, 

    render: createRender({}), 
}); 

// Redux 
const store = createStore(
    rootReducer, 
    compose (
    applyMiddleware(thunk), 
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__() 
) 
); 

// Render component into DOM element. 
const render = Component => { 
    ReactDOM.render(
    <AppContainer> 
     <Provider store={store}> 
     <Router resolver={new Resolver(environment)} /> 
     </Provider> 
    </AppContainer>, 
    document.getElementById('root') 
) 
}

答

你的功能是不是你的组件的道具，所以你应该直接调用它没有this.props（showDropDown（））

此外，您有关于“标记为必需”的错误，因为您必须根据propTypes中的要求定义React属性，因此应删除相关行。

并且为了激发一个动作，你应该调度它并且这样做，你需要访问该功能。这可以通过mapDispatchToProps函数和connect来完成。

当我在组件中这样做。 '常量onClickHandler =（）=> props.openTheDropdown（）' 并定义 '常量mapDispatchToProps =（调度）=>（{ openTheDropdown：（）=> { 调度（{ 类型： 'SHOW_DROPDOWN'， dropdownType：'PROFILE_SETTINGS'， dropdownProps：{} }） } }）; 出口默认连接（空， mapDispatchToProps ）（StreamWidget）' 我仍然无法看到被解雇的行动。我认为出于某种原因连接不正确地发送showDropdown的值.. –

在你的组件不要忘了通过this.props调用你的方法，而不只是道具。 –

您是否在点击按钮时看到该函数被调用？ –

答

道具作为参数传递给你的函数传递：

import React from 'react'; 
import { connect } from 'react-redux'; 

import { showDropdown } from '../../redux/actions/dropdownActions'; 

function StreamWidget(props) { 
    const onClickHandler =() => props.showDropdown() 

    return (
    <div> 
    <a 
     href='#' 
     role='button' 
     onClick={ onClickHandler } 
    /> 
    </div> 
); 
} 
export default connect(null, { showDropdown })(StreamWidget);

谢谢，但即使在这些更改后，它仍然不会更新状态。我已经编辑了这个问题来包含index.js。因为我也遇到了一个错误，说'警告：失败的道具类型：道具'children'在'App'中被标记为必需的，但它的值是'undefined'。在App'中。也许店里出了点问题。 –

@MaryCahill你有没有定义任何'propTypes'？ –

主要''组件我有孩子作为必需的节点。在问题的组件中，我将'showDropdown'作为所需的函数。后者不抱怨 - 我相信这意味着该函数被定义.. –

Redux Action没有被解雇

相关推荐