为什么我无法从 react-redux 状态打印数字总和？

Question

有人可以帮助我了解为什么我无法反映“sum”，它是从 UI 上的输入框值“numOne”和“numTwo”传递的两个数字的总和。请参考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;

为什么我无法从 react-redux 状态打印数字总和？

Why my I am not able to print sum of numbers from react-redux state?

javascript

reactjs

redux

react-redux

AddNum.jsx

action.js

AddNumReducer.js