Question

如何解决此错误TypeError：无法读取未定义的属性“ type”。我对react-redux和redux非常陌生，只是我想通过redux进行状态管理。为此，我安装了react-redux和redux npm软件包。我创建了一个商店，在商店中有一个reducer.js文件。甚至我导入了Provider并存储在index.js中。帮助解决此问题。

在存储文件夹中，我有reducer.js文件

这是reducer.js文件代码

const initialState =  {
    age: 21
}

const reducer = (state = initialState, action) => {
    const newState = {state};


    if(action.type === 'AGE_UP') {
        newState.age++
    }

    if(action.type === 'AGE_DOWN') {
        newState.age--
    }
    return newState;
};

export default reducer

这是App.js

import React, { Component } from 'react';
import './App.css'
import { connect } from 'react-redux'

class App extends Component {
  render() {
    return (
      <div className='App'>
        <div>Age: <span>{this.props.age}</span></div>
        <button onClick={this.props.onAgeUp}>Age UP</button>
        <button onClick={this.props.onAgeDown}>Age Down</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    age:state.age
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onAgeUp: () => dispatch({type: 'AGE_UP'}),
    onAgeDown: () => dispatch({type: 'AGE_DOWN'})
  }
}
// export default connect()(App)
export default connect(mapStateToProps,mapDispatchToProps) (App)

这是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reducer from './store/reducer';

import { Provider } from 'react-redux';
import { createStore } from 'redux';

import * as serviceWorker from './serviceWorker';

const store = createStore({}, reducer);

ReactDOM.render(<Provider projectStore={store}><App></App></Provider>, document.getElementById('root'));
serviceWorker.unregister();

Answer 1

我可以在您的代码中看到多个问题：

createStore将reducer作为第一个参数，看看API documentation，尝试以下操作：

const store = createStore(reducer);

Provider具有道具store而不是projectStore，请看API documentation，试试这个：

ReactDOM.render(<Provider store={store}><App></App></Provider>, document.getElementById('root'));

您可能会在化简器中改变状态，请尝试以下操作：

const reducer = (state = initialState, action) => {
    // it is better to use switch instead of if in reducer, for sake of readability
    switch (action.type) {
        case 'AGE_UP':
            // it is better to have return statement here, it is more robust to developer errors
            // it is better to use object spread and return result here than creating `newState` variable, you will do less errors
            return {...state, age: state.age + 1}
        case 'AGE_DOWN':
            return {...state, age: state.age - 1}
    }
    return state;
};

为什么会出现此错误TypeError：无法读取未定义的属性'type'

1 个答案: