Redux Requisiten funktioniert nicht

Question

Hallo, ich versuche Redux vor kurzem. Ich wollte einen Zähler für die Praxis bauen. Es besteht aus zwei Tasten (plus & minus) und einem Zähler mit der aktuellen Nummer.

Die Aktionsersteller und Reduzierer sind mit den entsprechenden Komponenten verbunden. Das Geschäft ist auch mit dem Anbieter verbunden. Aber ich weiß nicht warum, aber die Anfangszahl (Status wurde als Requisite an die Gegenkomponente weitergegeben) wird nicht angezeigt?

Codepen

Javascript:

/*--Reducers--*/ 
const reducer_num = (state=0,action)=>{ 
    switch(action.type){ 
    case "PLUS": 
    case "MINUS": 
     return state + action.payload; 
    default: 
     return state; 
    } 
} 

const rootReducer = Redux.combineReducers({ 
    num: reducer_num 
}); 

/*--Action creators--*/ 
const action_plus =()=>{ 
    return { 
    type: "PLUS", 
    payload: 1 
    }; 
} 

const action_minus =()=>{ 
    return { 
    type: "MINUS", 
    payload: -1 
    }; 
} 

/*--Components & containers--*/ 
//counter 
const Counter = (props)=>{ 
    return (<div className="counter">{props.num}</div>); 
} 

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

ReactRedux.connect(mapStateToProps)(Counter); 

//plus 
const Plus = (props)=>{ 
 return (<div className="plus" onClick={props.plus}>+</div>); 
} 

const mapDispatchToProps_plus = (dispatch)=>{ 
    return Redux.bindActionCreators({plus: action_plus},dispatch); 
} 

ReactRedux.connect(mapDispatchToProps_plus)(Plus); 

//minus 
const Minus = (props)=>{ 
    return (<div onClick={props.minus} className="minus">-</div>); 
} 

const mapDispatchToProps_minus = (dispatch)=>{ 
    return Redux.bindActionCreators({minus: action_minus},dispatch); 
} 

ReactRedux.connect(mapDispatchToProps_minus)(Minus); 

// Provider & store 
const Provider = ReactRedux.Provider, 
     store = Redux.createStore(rootReducer); 
//App 
const App =()=>{ 
    return (
    <Provider store={store}> 
    <div className="container"> 
    <Plus/> 
    <Counter/> 
    <Minus/> 
    </div> 
     </Provider> 
); 
} 

ReactDOM.render(<App/>,document.body); 

Vielen Dank für jede Hilfe.

Answer 1

Es gibt ein paar Probleme mit dem Code waren,

Erstens:mapDispatchToProps ist zweites Argument connect Funktion und wenn Sie keine mapStateToProps Funktion haben, müssen Sie das erste Argument als Null übergeben

Zweitens:connect gibt eine Komponente zum Speicher verbunden, die Sie Gebrauch machen müssen, aber Sie verwenden nicht, dass

kompletten Code:

/*--Reducers--*/ 
const reducer_num = (state=0,action)=>{ 
    switch(action.type){ 
    case "PLUS": 
    case "MINUS": 
     console.log(action.type) 
     return state + action.payload; 
    default: 
     return state; 
    } 
} 

const rootReducer = Redux.combineReducers({ 
    num: reducer_num 
}); 

/*--Action creators--*/ 
const action_plus =()=>{ 
    return { 
    type: "PLUS", 
    payload: 1 
    }; 
} 

const action_minus =()=>{ 
    console.log('minus') 
    return { 
    type: "MINUS", 
    payload: -1 
    }; 
} 

/*--Components & containers--*/ 
//counter 
let Counter = (props)=>{ 
    return (<div className="counter">{props.num}</div>); 
} 

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

Counter = ReactRedux.connect(mapStateToProps)(Counter); 

//plus 
let Plus = (props)=>{ 
 return (<div className="plus" onClick={props.plus}>+</div>); 
} 

const mapDispatchToProps_plus = (dispatch)=>{ 
    return Redux.bindActionCreators({plus: action_plus},dispatch); 
} 

Plus = ReactRedux.connect(null,mapDispatchToProps_plus)(Plus); 

//minus 
let Minus = (props)=>{ 
    console.log(props); 
    return (<div onClick={props.minus} className="minus">-</div>); 
} 

const mapDispatchToProps_minus = (dispatch)=>{ 
    return Redux.bindActionCreators({minus: action_minus},dispatch); 
} 

Minus=ReactRedux.connect(null,mapDispatchToProps_minus)(Minus); 

// Provider & store 
const Provider = ReactRedux.Provider, 
     store = Redux.createStore(rootReducer); 
//App 
const App =()=>{ 
    return (
    <Provider store={store}> 
    <div className="container"> 
    <Plus/> 
    <Counter/> 
    <Minus/> 
    </div> 
     </Provider> 
); 
} 

    ReactDOM.render(<App/>,document.body); 

CODEPEN

Answer 2

Sie Code von Counter Komponente sollte wie folgt aussehen:

let Counter = (props)=>{ 
    return (<div className="counter">{props.num}</div>); 
} 

Counter = ReactRedux.connect(mapStateToProps)(Counter); 

Sie haben Komponente durch die connect Funktion zurück machen. Ein ähnlicher Fehler ist in Plus und Minus.

Sie haben mapDispatchToProps_minus als erstes Argument für Plus und Minus Komponente angegeben, die falsch ist. Erstes Argument soll mapStateToProps

const mapStateToProps =() => ({}) 
ReactRedux.connect(mapStateToProps, mapDispatchToProps_minus)(Minus); 

Answer 3

Sie erstellen angeschlossene Komponenten, aber Sie sie nie an Variablen zuweisen, und Sie setzen die alten ‚stummen‘ Komponenten in der Hauptkomponente, die Sie den DOM machen.

I've created a fixed version of your CodePen.

/*--Reducers--*/ 
const reducer_num = (state = 0, action) => { 
    switch (action.type) { 
    case "PLUS": 
    case "MINUS": 
     return state + action.payload; 
    default: 
     return state; 
    } 
}; 

const rootReducer = Redux.combineReducers({ 
    num: reducer_num 
}); 

/*--Action creators--*/ 
const action_plus =() => { 
    return { 
    type: "PLUS", 
    payload: 1 
    }; 
}; 

const action_minus =() => { 
    return { 
    type: "MINUS", 
    payload: -1 
    }; 
}; 

/*--Components & containers--*/ 
//counter 
const Counter = props => { 
    return <div className="counter">{props.num}</div>; 
}; 

const mapStateToProps = state => { 
    return { num: state.num }; 
}; 

const CounterContainer = ReactRedux.connect(mapStateToProps)(Counter); 

//plus 
const Plus = props => { 
    return <div className="plus" onClick={props.plus}>+</div>; 
}; 

const mapDispatchToProps_plus = dispatch => { 
    return Redux.bindActionCreators({ plus: action_plus }, dispatch); 
}; 

const PlusContainer = ReactRedux.connect(mapDispatchToProps_plus)(Plus); 

//minus 
const Minus = props => { 
    return <div onClick={props.minus} className="minus">-</div>; 
}; 

const mapDispatchToProps_minus = dispatch => { 
    return Redux.bindActionCreators({ minus: action_minus }, dispatch); 
}; 

const MinusContainer = ReactRedux.connect(mapDispatchToProps_minus)(Minus); 

// Provider & store 
const Provider = ReactRedux.Provider, 
    store = Redux.createStore(rootReducer); 
//App 
const App =() => { 
    return (
    <Provider store={store}> 
     <div className="container"> 
     <PlusContainer /> 
     <CounterContainer /> 
     <MinusContainer /> 
     </div> 
    </Provider> 
); 
}; 

ReactDOM.render(<App />, document.body); 

Answer 4

Ich bin nicht sicher, aber ich verwendet nur Ihre Codepen und es scheint, dass Sie Requisiten zu Ihrem Zähler Komponente passieren vergessen zu.

wenn Sie das tun Zähler num = {4}

dann sollte es funktionieren :)