首页 文章

REDUX：为什么商店不会向我的组件提供数据？

提问于
浏览 次
0

新手在这里试图学习一些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，然后在Main组件中分配store.getState（） . isLoggedIn - 但没有任何效果 .

谁能告诉我哪里出错了？

redux react-redux

1 回答

  • 2

    您不能使用 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 .

    回复于

相关问题