Question

我已经使用Relay，Redux和GraphQL设置了一个应用程序。当我触发一个动作来显示下拉列表时，状态不会更新（当我使用react-redux devtools来调度动作时，状态会更新。）我有以下行动：

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()时，我没有收到错误，但没有任何事情，商店没有更新。

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

// 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')
  )
}

Answer 1

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

wamp

Answer 2

你的函数不是你组件的道具所以你应该直接调用它而不用this.props（showDropDown（））

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

为了发起一个动作你应该发送它，这样你需要访问该功能。这可以通过mapDispatchToProps函数完成并连接。

Redux Action没有被解雇

2 个答案: