首页 文章

动作创建者在直接传递给连接时不能用作道具中的函数

提问于
浏览 次
3
import * as actions from '../actions';

export default connect(
  mapStateToProps,
  actions
)(MyComponent);

我导入了动作并将其传递给连接，如下所示 . 我有一个名为authenticate的动作创建者 . 当我在console.log（this.props）时，它显示使用mapStateToProps（）映射的状态但是它没有在props列表中显示authenticate函数 . 我想我们可以使用这样的动作而不必编写mapDispatchToProps（）函数 . 为什么这不起作用？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import App from './components/app';
import Home from './components/home';
import reducers from './reducers';

import '../styles/style.css';

const store = createStore(reducers);

ReactDOM.render(
  <MuiThemeProvider>
    <Provider store={store}>
      <Router>
          <div>
            <Route path="/"  component={App}/>
            <Route path="/home" component={Home}/>
          </div>
      </Router>
    </Provider>
  </MuiThemeProvider>
  , document.getElementById('app'));

动作/ index.js

import { CHANGE_AUTH } from './constants';

export default function authenticate(isLoggedIn) {
  return {
    type: CHANGE_AUTH,
    payload: isLoggedIn
  };
}

组件/ app.js

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';

import * as actions from '../actions';

class App extends Component {
  authButton = () => {
    if(this.props.authenticated) {
      return <RaisedButton label="Sign out" onClick={this.props.authenticate(false)} />
    }

    return <RaisedButton label="Sign out" onClick={this.props.authenticate(true)} />
  }
  render() {
    console.log(this.props);
    return (
        <div>{this.authButton()}</div>
    );
  }
}

const mapStateToProps = (state) => {
  return { authenticated: state.authenticated };
}

export default connect(mapStateToProps, actions)(App);

减速器/ authentication.js

import { CHANGE_AUTH } from '../actions/constants';

export default function(state = false, action ) {
  switch (action.type) {
    case CHANGE_AUTH:
      return action.payload;
    default:
      return state;
  }
}

减速器/ index.js

import { combineReducers } from 'redux';
import authenticationReducer from './authentication';

const rootReducer = combineReducers({
  authenticated: authenticationReducer
});

export default rootReducer;

这是整个代码 . 我不确定为什么动作创作者不在道具上 .

当我在components / app.js中的authButton（）函数中执行this.props.authenticate（false）时，我得到了错误his.props.authenticate不是函数 .

这些是依赖项

"dependencies": {
    "material-ui": "^0.20.0",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2"
  }
javascript reactjs redux react-redux

2 回答

  • 0

    直接传递动作就像连接一样

    import * as actions from '../actions';

export default connect(
  mapStateToProps,
  actions
)(MyComponent);

    作品 .

    根据connect mapDispatchToProps的文档

    如果传递了一个对象，则其中的每个函数都被假定为Redux动作创建者 . 具有相同函数名称的对象，但每个动作创建者都包含在一个调度调用中，因此可以直接调用它们，它们将合并到组件的props中 .

    您的情况中的错误是您将操作 authenticate 导出为默认导出，并在导入时将其导出

    import * as actions from '../actions';

    身份验证操作由名称 default 导入，因此可以从 this.props.default(true) 等道具中使用 . 相反，你应该像它一样 export

    import { CHANGE_AUTH } from './constants';

export function authenticate(isLoggedIn) {
  return {
    type: CHANGE_AUTH,
    payload: isLoggedIn
  };
}

    然后你就可以像 this.props.authenticate() 一样访问它

    回复于
  • 3

    你必须派遣行动 . connect语句应该写成

    export default connect(mapStateToProps, (dispatch) => { authenticate(arg) : dispatch(actions.authenticate(arg))})(App);
    回复于

相关问题