回收者视图数据具有自己的回收者视图数据

// actions.js
export const updateData = (data) => ({
  type: 'UPDATE_DATA',
  payload: data,
});

// reducer.js
const initialState = { data: {} };

export const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

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

const store = createStore(dataReducer);

export default store;

// ComponentA.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { updateData } from './actions';

const ComponentA = () => {
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch(updateData(event.target.value));
  };

  return <input type="text" onChange={handleChange} />;
};

export default ComponentA;

// ComponentB.js
import React from 'react';
import { useSelector } from 'react-redux';

const ComponentB = () => {
  const data = useSelector(state => state.data);

  return <div>{data}</div>;
};

export default ComponentB;