全局状态值未显示在 redux 中 [英] Global state value is not being displayed in redux

问题描述

我正在尝试在 React 组件上显示存储值.但这返回未定义.我的 action 和 reducer 工作正常并且正在更新状态.

但是组件应该在每次状态更改时重新渲染.似乎 mapStateToProps OR 连接函数工作不正常.

这是我的代码:

import React, {Component} from 'react';从 'react-dom' 导入 ReactDOM；从'react-redux'导入{Provider，connect}；从redux"导入{createStore}；山姆类扩展组件{构造函数(道具){超级(道具)}使成为(){返回(<div>{this.props.globalState.no}//未捕获的类型错误:无法读取未定义的属性no"<button onClick={()=>{store.dispatch(incAction)}}>点击我</button>

)}}const reducer = (state={name:'Piyush',no:0}, action) =>{if(action.type==='INC'){console.log("INC");console.log("getstate => ", store.getState());console.log("旧状态 => ", state);console.log("New State => ", Object.assign({}, state, {no:state.no + 1}));返回 Object.assign({}, state, {no:state.no + 1})}返回状态；}const incAction = {类型:'INC'}const mapStateToProps = (globalState) =>{返回 {globalState:globalState.reducer}}const store = createStore(reducer);ReactDOM.render(<Provider store={store}><Sam/></Provider>, document.getElementById('app'))导出默认连接(mapStateToProps)(山姆)

解决方案

看起来您的 mapStateToProps 不正确.应该是这样的:

const mapStateToProps = (globalState) =>{返回 {globalState};}

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

I am trying to display a store value on react component. But that returns undefined. My action and reducer are working fine and updating the state.

But component should re-render on every state change. It seems like the mapStateToProps OR connect function is not working correctly.

Here is my code:

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)

解决方案

Looks like your mapStateToProps is incorrect. It should be something like this:

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

Since your current mapStateToProps simply returns {globalState: globalState.reducer}, then when you try to access this.props.globalState.no it doesn't exist because globalState.reducer doesn't exist. Your globalState looks like {name:'Piyush',no:0}.

这篇关于全局状态值未显示在 redux 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！