REDUX:为什么商店不向我的组件提供数据? [英] REDUX: Why won't the store provide data to my component?

问题描述

这里的新手正在尝试学习一些 Redux.目标:获得一个按钮来点击和登录/退出，以任何方式将商店更新为真/假状态.

const store = createStore(myReducer)创建了我的 store，传入了我的 reducer.

这有一个默认的退出状态.并在单击按钮时返回相反的结果.

我知道此操作通过调试起作用.

function myReducer(state = { isLoggedIn: false }, action) {开关(动作.类型){案例切换":返回 {isLoggedIn: !state.isLoggedIn}默认:返回状态}}

问题从这里开始 - 当我尝试访问 store.getState() 数据时.

class Main 扩展了 React.Component {使成为() {返回 (<div><h1>登录状态:{ state.isLoggedIn }</h1><button onClick={this.props.login}>登录</button>

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

我试过 store.getState().isLoggedIn &store.getState() &this.props.status 然后在 Main 组件中分配 store.getState().isLoggedIn - 但没有任何效果.

谁能告诉我哪里出错了?

解决方案

您不会使用 getState 直接访问商店来查找数据.Redux 文档 深入解释了这个过程，但基本上你会连接使用 react-redux 包的 connect 方法将每个组件连接到 Redux 存储.

下面是一个示例，说明这如何适用于您的上述组件:

import React, { Component } from 'react'从'react-redux'导入{连接}从 '../components/Main' 导入 Main类 MainContainer 扩展组件 {使成为() {return <Main {...this.props}/>}}const mapStateToProps = state =>({isLoggedIn: state.isLoggedIn,})const mapDispatchToProps = dispatch =>({登录() {调度({类型:'切换'})},})主容器 = 连接(mapStateToProps，mapDispatchToProps，)(主容器)导出默认 MainContainer

然后您可能希望渲染 MainContainer 代替 Main 组件.容器在渲染时会将 isLoggedIn 和 login 作为 props 传递给 Main.

Newbie here trying to learn some Redux. GOAL: to get a button to click and login/logout, updating the store as true/false status whichever way.

const store = createStore(myReducer) Created my store, passing in my reducer.

This has a default state of logged out. And returns the opposite, whenever the button is clicked.

I know this action works through debugging.

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

The problem starts here - when i try to access the store.getState() data.

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();

I've tried store.getState().isLoggedIn & store.getState() & this.props.status and then assigning the store.getState().isLoggedIn in the Main component - but nothing works.

Can anyone tell me where i'm going wrong?

解决方案

You don't directly access the store using getState to find data. The Redux docs explain the process in-depth, but basically you'll connect each component to the Redux store using connect method of the react-redux package.

Here's an example of how this could work for your above component:

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

You would then want to render the MainContainer in place of the Main component. The container will pass down isLoggedIn and login as props to Main when it renders it.

这篇关于REDUX:为什么商店不向我的组件提供数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！