直接传递给连接

时间:2018-02-01 07:25:55

标签: javascript reactjs redux react-redux

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"
  }

2 个答案:

答案 0 :(得分:3)

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

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()

一样访问它

答案 1 :(得分:0)

你必须派遣行动。 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