Question

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

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

我导入了动作并将其传递给连接，如下所示。我有一个名为authenticate的动作创建者。当我在console.log（this.props）时，它显示了使用mapStateToProps（）映射的状态但它没有在道具列表中显示身份验证功能。我想我们可以使用这样的动作而不必编写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"
  }

Answer 1

将操作直接传递给连接，如

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

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

作品。

根据connect mapDispatchToProps

的文档

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

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

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

身份验证操作由名称default导入，因此可以从this.props.default(true)等道具中使用。相反，您应export将其作为named export之类的

import { CHANGE_AUTH } from './constants';

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

然后您可以像this.props.authenticate()

一样访问它

Answer 2

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

df = df.assign(cat=lambda df: df.cat + np.random.rand(len(df))).head(3)
print (df)
        cat  value
0  1.886429      3
1  1.426777      3
2  1.899689      3

直接传递给连接

2 个答案: