react 手写一个redux实现多组件共享。

先来看一下目录结构   （最下面有代码，可以直接粘贴哈）
我写啦三个渲染文件 俩个共享数据的数据源 一个合并store文件 还有一个根文件。

视屏演示
 

屏幕录制2024-05-08 17.36.22

第一步创建共享数据源文件 。这里是创建了俩个（一个也行 看项目。），不过代码类似。

 global    type为name。

counterReducer type为user

第二步创建store实例 并导出  把创建好的数据源导入。
 combineReducers 方法不知道什么意思的 可以去官方看一下哈。 虽然我没看懂 大概的意思是   嗯～ ～嗯～～  ...合并吧  哈哈。知道的大佬评论区留言下。

第三步 传递store 共享

把store实例导入根文件 使用 react-redux自带的组件 Provider 把redux和组件进行连接。

第四步引用和修改值 这注释写的多详细， 又细又快。到这里就结束啦哈。
CounterButton 


以下是复制代码  还是按步骤来的哈。
global
 

const initialState = {
    name: '张三',
    age:10
  };

// 把 initialState 做为初始化传递给state  action则是你通过dispatch修改的值 包含 类型type 以及值。
  function globalname(state = initialState, action) {
    // 接受action对象里面的值
    switch (action.type) {
        case 'name': //修改数据源的类型
            //循环渲染更新值的状态
            const newState = { ...state };
            Object.keys(action.payload).forEach(key => {
                newState[key] = action.payload[key];
            });
            return newState;
        default:
          return state;
      }
  }
  
  export default globalname;

counterReducer
 

const initialState = {
    value: 55,
  };


  function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'user':
            const newState = { ...state };
            Object.keys(action.payload).forEach(key => {
                newState[key] = action.payload[key];
            });
            return newState;
        default:
          return state;
      }
  }
  
  export default counterReducer;

store

// 创建store实例
import { createStore } from 'redux';
// 多个实例合并成一个，并导出一个
import { combineReducers } from 'redux';
import CounterReducer from './counterReducer';
import Globalname from './global';

// combineReducers 是 Redux 中的一个辅助函数，用于将多个 reducer 合并成一个单独的 reducer。
// 在 Redux 应用中，通常会有多个 reducer，每个 reducer 负责管理状态树的不同部分。使用 combineReducers 可以将这些独立的 reducer 合并成一个根 reducer，以便在应用中使用。
const rootReducer = combineReducers({
  counter: CounterReducer, //counter自定义 CounterReducer state数据源 及修改状态组件
  global:Globalname
});

const store = createStore(rootReducer);
// 导出store实例
export default store;

App
 

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import CounterButton from './CounterButton';
import CounterDisplay from './CounterDisplay';
import Username from './username';


function App() {

  return (
    // Provider 链接 组件和redux的标签 
    <Provider store={store}>
      <div>
        <CounterButton />
        <CounterDisplay />
        <Username />
      </div>
    </Provider>
  );
}

export default App;

CounterButton
 

import React from 'react';
import {useDispatch, useSelector } from 'react-redux';

function CounterButton() {
  const {value} = useSelector((state) => state.counter); //获取counterReducer初始值
  const {name,age} = useSelector((state) => state.global); //获取global初始值
  const dispatch = useDispatch();

  const handleIncrement = () => {
  // 改变global数据源的值
    dispatch({
      type:'name', //通过类型匹配进行修改
      payload:{
          name:'第一个组件触发的', //建  值 可以是多个值
          age:99999
      }
  })
  // 改变counterReducer数据源的值
  dispatch({
      type:'user',
      payload:{
          value:'老大',
      }
  })
  };


  return (
    <div>
      <h1>第一个组件</h1>
      <p>Count: {value}</p>
      <p>name: {name}</p>
      <p>age: {age}</p>
      <button onClick={handleIncrement}>变值</button>  
      {/* 点击修改俩个store中的值 引用的组件自动获取最新值 */}
    </div>
  );
}

export default CounterButton;

CounterDisplay
 

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

function CounterDisplay() {
  const count = useSelector((state) => state.counter.value);

  return (
    <div>
    <h1>第二个组件</h1>
    <p>Count: {count}</p>
    </div>
    
  );
}

export default CounterDisplay;

username
 

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



function Username() {
    const dispatch = useDispatch();

    const handleDecrement = () => {
        dispatch({
            type:'name', //通过类型匹配进行修改
            payload:{
                name:'第三个组件触发的', //建  值 可以是多个值
                age:8888
            }
        })
        dispatch({
            type:'user',
            payload:{
                value:'老三',
            }
        })
      };
  return (
    <div>
      <h1>第三个组件</h1>
      <button onClick={()=>handleDecrement()}>名字</button>
    </div>
  )
}

export default Username;