我如何实现Redux到已经有道具的功能组件？

npm install redux react-redux

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

const store = createStore(rootReducer);

export default store;

// reducers.js
const initialState = {
  // 初始状态
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    // 处理不同的 action
    default:
      return state;
  }
}

export default rootReducer;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

// MyComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function MyComponent(props) {
  const dispatch = useDispatch();
  const myState = useSelector(state => state.myState);

  // 使用 props 和 Redux 状态
  return (
    <div>
      {/* 渲染逻辑 */}
    </div>
  );
}

export default MyComponent;

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

const store = createStore(rootReducer);

export default store;

// reducers.js
const initialState = {
  myState: 'initial value'
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_STATE':
      return { ...state, myState: action.payload };
    default:
      return state;
  }
}

export default rootReducer;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

// MyComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function MyComponent(props) {
  const dispatch = useDispatch();
  const myState = useSelector(state => state.myState);

  const handleClick = () => {
    dispatch({ type: 'UPDATE_STATE', payload: 'new value' });
  };

  return (
    <div>
      <p>{myState}</p>
      <button onClick={handleClick}>Update State</button>
    </div>
  );
}

export default MyComponent;