全局状态值未在 redux 中显示

Question

我正在尝试在 React 组件上显示存储值。但是 returns 未定义。我的 action 和 reducer 工作正常并更新状态。

但组件应在每次状态更改时重新呈现。似乎 mapStateToProps 或 connect 功能没有正常工作。

这是我的代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Provider, connect} from 'react-redux';
import {createStore} from 'redux';

class Sam extends Component{
  constructor(props){
    super(props)
  }

  render(){
    return(
      <div>
        {this.props.globalState.no} // Uncaught TypeError: Cannot read property 'no' of undefined
        <button onClick={()=>{store.dispatch(incAction)}}>Click Me</button>
      </div>
    )
  }
}


const reducer = (state={name:'Piyush',no:0}, action) => {

  if(action.type==='INC'){
    console.log("INC");
    console.log("getstate => ", store.getState());
    console.log("Old state => ", state);
    console.log("New State => ", Object.assign({}, state, {no:state.no + 1}));
    return Object.assign({}, state, {no:state.no + 1})
  }
  return state;
}

const incAction = {
  type:'INC'
}

const mapStateToProps = (globalState) => {
  return {globalState:globalState.reducer}
}

const store = createStore(reducer);
ReactDOM.render(<Provider store={store}><Sam /></Provider>, document.getElementById('app'))
export default connect(mapStateToProps)(Sam)

Answer 1

看起来你的 mapStateToProps 不正确。它应该是这样的：

const mapStateToProps = (globalState) => {
  return {globalState};
}

由于您当前的 mapStateToProps 只是 returns {globalState: globalState.reducer}，那么当您尝试访问 this.props.globalState.no 它不存在，因为 globalState.reducer 不存在存在。你的 globalState 看起来像 {name:'Piyush',no:0}.

全局状态值未在 redux 中显示

Global state value is not being displayed in redux

react-redux