使用ReactJS在Redux Store中存储多个值

npm install redux react-redux

import { createStore, combineReducers } from 'redux';

// 示例reducer函数
const value1Reducer = (state = '', action) => {
  switch (action.type) {
    case 'SET_VALUE_1':
      return action.payload;
    default:
      return state;
  }
};

const value2Reducer = (state = 0, action) => {
  switch (action.type) {
    case 'SET_VALUE_2':
      return action.payload;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  value1: value1Reducer,
  value2: value2Reducer,
});

const store = createStore(rootReducer);

import { Provider } from 'react-redux';

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

import { connect } from 'react-redux';

const MyComponent = ({ value1, value2, setValue1, setValue2 }) => {
  // 使用value1和value2进行渲染

  // 调用setValue1和setValue2来更新状态
};

const mapStateToProps = (state) => ({
  value1: state.value1,
  value2: state.value2,
});

const mapDispatchToProps = (dispatch) => ({
  setValue1: (value) => dispatch({ type: 'SET_VALUE_1', payload: value }),
  setValue2: (value) => dispatch({ type: 'SET_VALUE_2', payload: value }),
});

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