React-Redux -如何在应用程序的状态中设置字段？

// userReducer.js

const initialState = {
  name: '',
  age: 0,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return {
        ...state,
        name: action.payload,
      };
    case 'SET_AGE':
      return {
        ...state,
        age: action.payload,
      };
    default:
      return state;
  }
};

export default userReducer;

// rootReducer.js

import { combineReducers } from 'redux';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  user: userReducer,
  // 其他的reducer函数
});

export default rootReducer;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './rootReducer';
import App from './App';

const store = createStore(rootReducer);

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

// UserComponent.js

import React from 'react';
import { connect } from 'react-redux';

const UserComponent = ({ name, age, setName, setAge }) => {
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(parseInt(e.target.value))}
      />
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    name: state.user.name,
    age: state.user.age,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setName: (name) => dispatch({ type: 'SET_NAME', payload: name }),
    setAge: (age) => dispatch({ type: 'SET_AGE', payload: age }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(UserComponent);