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（）数据时

类主扩展React.Component{
render（）{
返回(
登录状态：{state.isLoggedIn}
登录
)
}
}
常量渲染=（）=>{
ReactDOM.render（store.dispatch（{type:'TOGGLE'}）}/>，document.getElementById（'root'）；
}
存储。订阅（呈现）；
render（）；

我尝试了store.getState（）.isLoggedIn&store.getState（）&this.props.status，然后在主组件中分配store.getState（）.isLoggedIn，但没有任何效果

---

有人能告诉我哪里出错了吗？

您不能使用

getState

直接访问存储来查找数据。本文将深入解释该过程，但基本上您将使用

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

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../components/Main”导入Main
类MainContainer扩展组件{
render（）{
返回
}
}
常量mapStateToProps=状态=>({
isLoggedIn:state.isLoggedIn，
})
const mapDispatchToProps=调度=>({
登录（）{
分派（{type:'TOGGLE'}）
},
})
主容器=连接(
MapStateTops，
mapDispatchToProps，
)（主集装箱）
导出默认主容器

---

然后，您将希望呈现

MainContainer

以代替

Main

组件。当容器呈现它时，它会将

isLoggedIn

和

login

作为道具传递到

Main

。

您不会使用

getState

直接访问存储以查找数据。本文将深入解释该过程，但基本上您将使用

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

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../components/Main”导入Main
类MainContainer扩展组件{
render（）{
返回
}
}
常量mapStateToProps=状态=>({
isLoggedIn:state.isLoggedIn，
})
const mapDispatchToProps=调度=>({
登录（）{
分派（{type:'TOGGLE'}）
},
})
主容器=连接(
MapStateTops，
mapDispatchToProps，
)（主集装箱）
导出默认主容器

---

然后，您将希望呈现

MainContainer

以代替

Main

组件。当容器呈现时，它将

isLoggedIn

和

login

作为道具传递给

Main

。

谢谢@MarkChandler-我正在学习丹·阿布拉莫夫的教程，他的todo（因此切换todo）列表在切换阶段似乎还没有使用MapStateTops？也许我有点过头了，但是如果你只是想在div中显示loggedin'true'或'false'，那么connect（）和上面的内容是必要的吗？@newieaid：你可以通过其他方式访问状态，比如从创建的文件导入存储并调用

store.getState（）

，但这是惯用的方法。我想说的是，你已经超越了自己，因为我知道他后来进入了

mapstatetops

。Dan还为egghead.io上的Redux提供了两个免费视频演练，涉及一些非常高级的主题。如果你能从视频中学到东西，我绝对推荐你！是的，我现在是书呆子，谢谢。这只是我的想法，因为有一个切换按钮，登录或退出（真/假），然后显示，似乎很简单我可以在控制台上看到它。。。是的，我已经用头撞屏幕5个小时了！哈哈。谢谢@MarkChandler-我在学习Dan Abramov教程，他的todo（因此切换todo）列表在切换阶段似乎还没有使用MapStateTops？也许我有点过头了，但是如果你只是想在div中显示loggedin'true'或'false'，那么connect（）和上面的内容是必要的吗？@newieaid：你可以通过其他方式访问状态，比如从创建的文件导入存储并调用

store.getState（）

，但这是惯用的方法。我想说的是，你已经超越了自己，因为我知道他后来进入了

mapstatetops

。Dan还为egghead.io上的Redux提供了两个免费视频演练，涉及一些非常高级的主题。如果你能从视频中学到东西，我绝对推荐你！是的，我现在是书呆子，谢谢。这只是我的想法，因为有一个切换按钮，登录或退出（真/假），然后显示，似乎很简单我可以在控制台上看到它。。。是的，我已经用头撞屏幕5个小时了！哈哈。