开发者问题收集

无法读取未定义的属性“类型”-react-redux

2020-02-08
1121

我是 redux 和 react 的新手,请帮助解决 Reducer 中的这个错误 无法读取未定义的属性“type” 我已经检查了好几次,但无法检测到问题,如果您有任何问题需要进一步澄清错误,请问我!,有一个组件是 Counter 组件和 Reducer,我已经在 index.js 中定义了存储

index.js

import {createStore} from "redux";
import reducer from "./store/reducer";
import {Provider} from 'react-redux'

const Store = createStore(reducer)

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

Counter.js 组件

 render () {
    return (
        <div>
            <CounterOutput value={this.props.ctr} />
            <CounterControl label="Increment" clicked={this.props.onIncrement} />
            <CounterControl label="Decrement" clicked={this.props.onDecrement}  />
            <CounterControl label="Add 5" clicked={this.props.ADDFive}  />
            <CounterControl label="Subtract 5" clicked={this.props.SUBFive}  />
            <button onclick={this.props.RESTORE}>Store Results</button>
            <ul>
                {this.props.rst.map((index,value) => (
                    <li key={index} onclick={() => this.props.REMOVE(index)}>value</li>
                ))}

            </ul>
        </div>
    );
}
}

const mapStateToProps=(state)=>{
    return{
        ctr:state.counter,
        rst:state.results
    }
}

const mapDispatchToProps=(dispatch)=>{
    return{
        onIncrement: () => dispatch({type:'INC_COUNTER'}),
        onDecrement:() => dispatch({type:'DEC_COUNTER'}),
        ADDFive:() => dispatch({type:'ADD_COUNTER',value:5}),
        SUBFive:() => dispatch({type:'SUB_COUNTER',value:5}),
        RESTORE:()=> dispatch({type:'RESTORE'}),
        REMOVE: () => dispatch({type:'REMOVE'})
    };
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

reducer.js

const initialState={
    counter:0,
    results:[]
}
const reducer=(state=initialState,action)=>{
     switch (action.type) {
        case('INC_COUNTER'):
           return {
               ...state,
               counter:state.counter+1
           }
           case('DEC_COUNTER'):
            return {
               ...state,
               counter:state.counter-1
           }
        case('ADD_COUNTER'):
            return {
               ...state,
               counter:state.counter+action.value
           }
           case('SUB_COUNTER'):
            return {
               ...state,
               counter:state.counter-action.value
           }
         case('RESTORE'):
            return {
               ...state,
               results:[...state.results,state.counter]
           }
           case('REMOVE'):
            return {
               ...state,
               results:[...state.results,state.counter]
           }

        default:
            return state

    }

}

export default reducer()
1个回答

正在研究沙盒解决方案,但这引起了我的注意

export default reducer()

更改为

export default reducer

如果可行,请告诉我。如果不行,将完成沙盒实施

varoons
2020-02-08