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

Question

这里的新手正在尝试学习一些 Redux。目标：获得一个可以点击的按钮并 login/logout，以任何方式将商店更新为 true/false 状态。

const store = createStore(myReducer) 创建我的商店，传递我的减速器。

默认状态为注销。而 returns 相反，每当单击按钮时。

我知道这个动作通过调试有效。

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 -但没有任何效果。

谁能告诉我哪里出错了？

Answer 1

您不会使用 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。

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

REDUX: Why won't the store provide data to my component?

redux

react-redux