使用mapStateToProps（）連接到商店

Question

我收到錯誤/警告「失敗的道具類型：道具logged在App中被標記爲需要，但在App中它的值爲undefined」。我無法弄清楚爲什麼它沒有從商店獲得價值。

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import PropTypes from 'prop-types'; 
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom'; 
import {Provider, connect} from 'react-redux'; 
import store from './store/store'; 

import Signup from './components/Signup'; 
import Home from './components/Home'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      logged: this.props.logged 
     }; 
    } 

    render() { 
     return (
      <Provider store={store}> 
       <BrowserRouter> 
        <Switch> 
         <Route exact path="/signup" component={Signup}/>       
         <Route exact path="/home" component={Home}/>        
         <Route exact path="/" render={() => (
          this.state.logged ? 
           <Redirect to="/home" push/> : <Redirect to="/signup" push/> 
         )}/> 
         <Redirect to="/"/> 
        </Switch> 
       </BrowserRouter> 
      </Provider> 
     ); 

    } 
} 

App.propTypes = { 
    logged: PropTypes.bool.isRequired 
}; 


const stateToProps = (state) => ({ 
    logged: state.loggedUserState.logged 
}); 

connect(stateToProps)(App); 

ReactDOM.render(<App/>, document.getElementById('root')); 

loggedUserReducer.js

const initialState = { 
    pending: true, 
    logged: false 
}; 

const loggedUserReducer = (state = initialState, action) => { 

    if (action.type === 'GET_LOGGED_USER') { 
     return Object.assign({}, state, { 
      pending: false 
     }); 
    } 

    return state; 
}; 

export default loggedUserReducer; 

store.js

import { createStore, combineReducers } from 'redux'; 
import loggedUserReducer from '../reducers/loggedUserReducer'; 

const reducers = combineReducers({ 
    loggedUserState: loggedUserReducer 
}); 

const store = createStore(reducers); 

export default store; 

Answer 1

此

代碼

//- Everything else.. 
 

 
connect(stateToProps)(App); //- Assign App here! 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

你忘了應用程序分配給您剛剛初始化connect版應用程序。

改爲此。

//- Everything else ... 
 

 
App.propTypes = { 
 
    logged: PropTypes.bool.isRequired 
 
}; 
 

 

 
const stateToProps = (state) => ({ 
 
    logged: state.loggedUserState.logged 
 
}); 
 

 
const ConnectedApp = connect(stateToProps)(App); 
 

 
ReactDOM.render(<ConnectedApp/>, document.getElementById('root'));

裝飾！

如果你有裝修enabled你也可以做。

@connect(state => ({ 
 
    logged: state.loggedUserState.logged 
 
}) 
 
class App extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      logged: this.props.logged 
 
     }; 
 
    } 
 

 
    render() { 
 
     return (
 
      <Provider store={store}> 
 
       <BrowserRouter> 
 
        <Switch> 
 
         <Route exact path="/signup" component={Signup}/>       
 
         <Route exact path="/home" component={Home}/>        
 
         <Route exact path="/" render={() => (
 
          this.state.logged ? 
 
           <Redirect to="/home" push/> : <Redirect to="/signup" push/> 
 
         )}/> 
 
         <Redirect to="/"/> 
 
        </Switch> 
 
       </BrowserRouter> 
 
      </Provider> 
 
     ); 
 

 
    } 
 
} 
 

 
App.propTypes = { 
 
    logged: PropTypes.bool.isRequired 
 
}; 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

約裝飾更多見：this article

更多關於反應/ REDUX看到this

警告有關從在下面的評論部分@markerikson裝飾。

使用裝飾器和這樣的proptypes仍然會導致 警告。這是因爲您將proptypes分配給由連接生成的包裝 組件，而從mapState 返回的數據作爲道具給予包裝組件。這是其中一個原因 爲什麼我們建議不要使用connect作爲裝飾器。