Question

我希望我的组件主要通过他们的道具访问商店。

我认为使用redux时执行此操作的正确方法是在connect上使用Provider

我完成了所有设置，但我的Components仍然没有prop的状态

App.js

我已经在这里添加了所有内容以确保完整性，因为我相信我很蠢，我很抱歉。

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as currentSexActionCreator from '../actions/currentSexActionCreator';

import { browserHistory } from 'react-router'

class App extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(nextValue) {
        browserHistory.push(`/${nextValue}`)
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

App.propTypes = {
    // Injected by React Router
    children: PropTypes.node
}

function mapStateToProps(state, ownProps) {
    return {
        errorMessage: state.errorMessage,
        inputValue: ownProps.location.pathname.substring(1),
        'hutber':'hutber'
    }
}
function mapDispatchToProps(dispatch) {
    return {
        currentSexAction: bindActionCreators(currentSexActionCreator, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

组件 - 应该有道具

class Sex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            participants: 1
        }
    }

    onSetParticipants = (data) => {
        store.dispatch (currentSex.setParticipants(data.valueText)); //the incorrect way to dispatch things, store is referencing the store
    }

    render() {
        console.info(this.props);
        return (
            <div>
                ....
                something here
                ....
            </div>
        )
    }
}    

export default Sex;

*提供者**

export default class Root extends Component {
  render() {
    const { store, history } = this.props;
    return (
      <Provider store={store}>
          <Router history={history}>
            <Route path="/" component={App}>
              <IndexRoute component={Splash}/>

              {/*No Signed In Page*/}
              <Route path="/signin" component={SignIn} onEnter={authStates.blockForLoggedInUsers}/>
              <Route path="/signup" component={signUp} onEnter={authStates.blockForLoggedInUsers}/>
              <Route path="/signupconfirm" component={SignUpConfirm} onEnter={authStates.blockForLoggedInUsers}/>

              {/*Login Required*/}
              <Route path="/home" component={Home} onEnter={authStates.requireLogin}/>
              <Route path="/selection" component={Selection} onEnter={authStates.requireLogin}/>

              {/*Sex Selection*/}
              <route path="/desire" component={Desire} onEnter={authStates.requireLogin}/>
              <route path="/desire/saved" component={DesireSaved} onEnter={authStates.requireLogin}/>
              <route path="/masturbation" component={Masturbation} onEnter={authStates.requireLogin}/>
              <route path="/masturbation/saved" component={MasturbationSaved} onEnter={authStates.requireLogin}/>
              <route path="/sex" component={Sex} onEnter={authStates.requireLogin}/>
              <route path="/sex/saved" component={SexSaved} onEnter={authStates.requireLogin}/>

            </Route>
          </Router>
          {/*<DevTools />*/}
      </Provider>
    )
  }
}

我不确定您是否需要更多信息，但我的组件console.info(this.props.store)内部基本上是undefined

也许我没有正确地思考它？

Answer 1

connect不会为连接的子组件神奇地填充道具。它只将商店变量作为道具传递给您连接的那个。如果你想进一步传递它们，你必须自己这样做：

let App = ({ foo }) => {
  return React.cloneElement(this.props.children, { foo, somethingElse: 'blah' })
}

connect(state => ({ foo: state.foo }))(App)

如果这对你有用，那就去吧，但是连接组件（或容器，如果你愿意）可能更常见的是期望商店数据。连接数百个组件没有任何问题。

class Sex extends Component {
  // now you have access to store data and dispatch
}

export default connect(mapStateToProps, mapDispatchToProps)(Sex)

路由器无法访问Provider Redux React中提供的存储

1 个答案: