嗨,我最近嘗試Redux。我想建立一個練習計數器。 它由兩個按鈕(加上&減號)和一個顯示當前數字的計數器組成。Redux道具不起作用
動作創建者和縮減器連接到相應的組件。商店也連接到提供商。然而,我不知道爲什麼,但最初的數字(作爲道具傳遞給櫃檯組件的狀態)沒有顯示出來?
的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);
任何幫助非常感謝。 Counter
組件的
謝謝!我現在知道了 –