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：为什么商店不向我的组件提供数据？

回答

相关问题