Почему возникает эта ошибка TypeError: Невозможно прочитать свойство 'type' из неопределенного

Question

Как решить эту ошибку. Ошибка типа: Не удается прочитать свойство 'тип' из неопределенного. Я очень новичок в реагировании на избыточность и избыточность, просто я пытаюсь управлять состоянием с помощью избыточности. Для этого я установил пакеты response-redux и redux npm. И я создал магазин, В магазине есть файл reducer.js. Даже я импортировал провайдера и храню в 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

Я вижу несколько проблем в вашем коде:

1. createStore принимает редуктор в качестве первого аргумента, посмотрите документацию API , попробуйте это:

const store = createStore(reducer);

Provider имеет реквизит store, а не projectStore, посмотрите документацию API , попробуйте это:

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;
};