将id从redux传递到组件的状态

// store.js
import { createStore } from 'redux';

const initialState = {
  id: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ID':
      return {
        ...state,
        id: action.payload,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

// actions.js
export const setId = (id) => ({
  type: 'SET_ID',
  payload: id,
});

// reducer.js
const initialState = {
  id: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ID':
      return {
        ...state,
        id: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { setId } from './actions';

const MyComponent = ({ id, setId }) => {
  useEffect(() => {
    // 在组件挂载时，从Redux中获取id的值
    // 可以通过异步操作获取id的值，例如从API请求数据
    const fetchedId = 123; // 假设从API获取的id为123
    setId(fetchedId);
  }, []);

  return (
    <div>
      <h1>Component</h1>
      <p>ID: {id}</p>
    </div>
  );
};

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

const mapDispatchToProps = {
  setId,
};

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