为什么我不能从反应还原状态打印数字的总和

Question

有人能帮我知道为什么我不能反思吗"sum"；其是从输入框值"0"传递的两个数字的和；numOne"；以及"；numTwo"；在UI上。请参阅AddNum.jsx.

下面是action.js

'use strict';
export const ADD_NUMBERS = 'ADD_NUMBERS';
export const RESET = 'RESET';
export const addNum = () => {
return {
"type" : ADD_NUMBERS,
}
}
export const reset = () => {
return {
"type" : RESET
}
}

下面是AddNumReducer.js

'use strict';
import {ADD_NUMBERS, RESET} from './action';
const addNumReducer = (state = { "sum" : 0}, action) => {
console.log(`AddNumReducer: sum ${state.sum}`);
console.log(`AddNumReducer: action.type ${action.type}`);
switch(action.type){
case ADD_NUMBERS:
return {
"sum" : state.sum
}
case RESET:
return {
"sum" : 0
}
default:
return state;    
}
}
export default addNumReducer;

下面是AddNumContainer.js

import AddNum from './AddNum';
import * as ActionCreator from './action';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
"sum" : state.addNums.sum        
}
}
const mapDispatchToProps = (dispatch) => {
return {
"actions" : bindActionCreators(ActionCreator, dispatch)
}
}
const AddNumContainer = connect(mapStateToProps, mapDispatchToProps)(AddNum); 
export default AddNumContainer;

下面是reducer.js

'use strict';
import { combineReducers } from 'redux';
import addNumReducer from './AddNumReducer';
export default combineReducers({
"addNums" : addNumReducer
});

下面是AddNum.jsx

'use strict';
import React, {Component, Fragment, useState} from 'react';

const AddNum = (props) => {
const [stateObj, setStateObj] = useState({
"numOne" : "",
"numTwo" : ""
});
const [counterStyle, setCounterStyle] = useState({
"fontSize" : "350px",
"fontWeight" : "bold",
"color" : "#483d8b"
});
const obj = {
"sum" : props.sum,         
"actions" : props.actions
}

const submitForm = () => {
let total = parseInt(stateObj.numOne) + parseInt(stateObj.numTwo);                               
obj.actions.addNum({
"sum" : total
});
}
return (
<Fragment>
<form className="form-inline">
<div className="form-group">
<label  for="numOneId" 
className="sr-only">Num One</label>
<input  type="text" 
className="form-control" 
id="numOneId" 
placeholder="Num One" 
value={stateObj.numOne}
onChange={event => setStateObj({
...stateObj,  
"numOne" : event.target.value
})} />
</div>
&nbsp;
<div className="form-group">
<label  for="numTwoId" 
className="sr-only">Num Two</label>
<input  type="text" 
className="form-control" 
id="numTwoId" 
placeholder="Num Two"
value={stateObj.numTwo} 
onChange={(event) =>{
setStateObj({
...stateObj,
"numTwo" : event.target.value
});
}}/>
</div>
&nbsp;
<button type="button" 
className="btn btn-primary"
onClick={submitForm}>Add</button>
&nbsp;
<button type="button" 
className="btn btn-default"
onClick={obj.actions.reset}>Reset</button>        
</form>
<div>
<span style={counterStyle}>{obj.sum}</span>
</div>
</Fragment>
)

}
export default AddNum;

下面是AddNumUI.jsx

'use strict';
import React, {Component, Fragment} from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import AddNumContainer from './AddNumContainer';
import rootReducer from './reducer';
const store = createStore(rootReducer);
const AddNumUI = () => {
return (
<Provider store={store}>
<AddNumContainer />
</Provider>
);
} 
export default AddNumUI;

Answer 1

您的操作和减速器有问题。您没有在减速器内的addNum操作中使用action.payload值。此外，您没有正确更新商店的状态。您需要扩展现有状态，然后将sum值更新为新值。

AddNum.jsx

const submitForm = () => {
let total = parseInt(stateObj.numOne) + parseInt(stateObj.numTwo); 
obj.actions.addNum({
sum: total       // action.payload.sum
});
}

action.js

export const ADD_NUMBERS = 'ADD_NUMBERS';
export const RESET = 'RESET';
export const addNum = (value) => {
return {
type: ADD_NUMBERS,
payload: value
}
}
export const reset = () => {
return {
type: RESET
}
}

AddNumReducer.js

import { ADD_NUMBERS, RESET } from './action';
const initialState = { sum: 0 }
const addNumReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_NUMBERS:
return {
...state,
sum: action.payload.sum
};
case RESET:
return {
...state,
sum: 0
};
default:
return state;
}
}
export default addNumReducer;