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

Question

新手在这里尝试学习一些 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 - 但没有任何效果。

谁能告诉我哪里出错了？

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。