REDUX：爲什麼商店不向我的組件提供數據？

新手在這裏試圖學習一些Redux。目標：獲取一個按鈕以單擊並登錄/註銷，以任何方式將商店更新爲真/假狀態。REDUX：爲什麼商店不向我的組件提供數據？

const store = createStore(myReducer) 創建我的商店，通過我的減速器。

這有一個註銷的默認狀態。並且只要點擊按鈕就會返回相反的結果。

我知道這個動作通過調試起作用。

function myReducer(state = { isLoggedIn: false }, action) { 
    switch (action.type) { 
    case 'TOGGLE': 
    return { 
     isLoggedIn: !state.isLoggedIn 
    } 
    default: 
    return state 
    } 
}

問題從這裏開始 - 當我嘗試訪問store.getState（）數據。

class Main extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>Login Status: { state.isLoggedIn }</h1> 
     <button onClick={this.props.login}>Login</button> 
     </div> 
    ) 
    } 
} 

const render =() => { 
    ReactDOM.render(<Main status={store.getState().isLoggedIn} login={() => store.dispatch({ type: 'TOGGLE' })}/>,  document.getElementById('root')); 
} 

store.subscribe(render); 
render();

我試過store.getState（）isLoggedIn & store.getState（）& this.props.status，然後在主要成分分配store.getState（）isLoggedIn - 。但沒有任何工程。

任何人都可以告訴我哪裏出錯了嗎？

來源

2016-12-21 NewbieAid

您不使用getState直接訪問商店以查找數據。 Redux docs深入解釋了該過程，但基本上，您將使用react-redux軟件包的connect方法將每個組件連接到Redux存儲。

這裏有一個如何，這可能對您的上述組件的示例：

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import Main from '../components/Main' 

class MainContainer extends Component { 
    render() { 
    return <Main {...this.props} /> 
    } 
} 

const mapStateToProps = state => ({ 
    isLoggedIn: state.isLoggedIn, 
}) 

const mapDispatchToProps = dispatch => ({ 
    login() { 
    dispatch({type: 'TOGGLE'}) 
    }, 
}) 

MainContainer = connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(MainContainer) 

export default MainContainer

你會再想要呈現MainContainer到位Main組件。容器在呈現時會通過isLoggedIn和login作爲道具傳遞到Main。

來源

2016-12-21 16:14:38

Thanks @MarkChandler - 我在跟隨Dan Abramov教程，他的待辦事項（因此切換待辦事項）列表似乎還沒有使用mapStateToProps，在那個切換階段？也許我在超越自己 - 但是connect（）和上面的必要條件，如果你只是想在div中顯示登錄'true'或'false'？ – NewbieAid

@NewbieAid：您可以通過其他方式訪問狀態，例如從其創建的文件中導入商店並調用store.getState（），但這是做事的慣用方式。我想說，儘管你已經領先於自己了，但我知道他稍後會進入'mapStateToProps'。丹還有兩個免費的視頻演練爲Redux在egghead.io進入一些相當先進的主題。我絕對推薦他們，如果你從視頻中學習的很好！ –

是的，我現在在Egghead上，謝謝。這只是做我的堅果，因爲有一個切換按鈕，登錄或註銷（真/假），然後顯示，似乎很*簡單的想法。＆我可以在控制檯中顯示它...所以是的，我一直在屏幕上敲擊我的頭5個小時！哈哈。 – NewbieAid

REDUX：爲什麼商店不向我的組件提供數據？

回答

相關問題