Question

新手在这里试图学习一些Redux。目标：获取一个单击并登录/注销的按钮，以任何方式将商店更新为真/假状态。

Activity 创建我的商店，传递我的减速机。

这是默认的已注销状态。只要单击按钮，就会返回相反的结果。

我知道这个动作可以通过调试来实现。

const store = createStore(myReducer)

问题从这里开始 - 当我尝试访问store.getState（）数据时。

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

我已经尝试过store.getState（）。isLoggedIn＆amp; store.getState（）＆amp; this.props.status然后在Main组件中分配store.getState（）。isLoggedIn - 但没有任何作用。

谁能告诉我哪里出错？

Answer 1

您不能使用getState直接访问商店来查找数据。 Redux docs深入解释了该过程，但基本上您将使用connect包的react-redux方法将每个组件连接到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作为道具传递给{{1}}。

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

1 个答案: