标签：react const dispatch number value --- state 笔记 return

目录复制

react中实现全局状态共享

• 1. redux概括
• • 1.1 redux、react-redux使用
• 2. Hook实现全局状态共享（Hook+ts）

1. redux概括

主要用处

• provider内的组件状态全局共享
• 跨组件传值，改变值

主要组成

• store 储存数据源
• reducer 负责将通过不同行为改变状态
• action 行为 一般由行为类型+新状态
• dispatch 派遣(调用)reducer的方法

1.1 redux、react-redux使用

git项目 链接: 类组件与函数组件中redux的基本使用.

2. Hook实现全局状态共享（Hook+ts）

• 创建一个全局上下文(相当于store)

interface IglobalContext {
 value: any;
 dispatch?: (action: { type: actionType; value?: number }) => void;
}
const globalContext = createContext<IglobalContext>({ value: 0 });

• 创建 reducer (并自定义Hook返回)

const useGlobal = () => {
  const reducers = (
    state: any,
    action: { type: actionType; value?: number },
  ) => {
    switch (action.type) {
      case actionTypeEnum.ADD:
        return {
          ...state,
          number: state.number + action.value,
        };
      case actionTypeEnum.SUB:
        return {
          ...state,
          number: state.number - (action.value ?? 0),
        };
      case actionTypeEnum.INV:
        return {
          ...state,
          number: Math.pow(state.number, 2),
        };
      case actionTypeEnum.EMPTY:
        return {
          ...state,
          number: 0,
        };
      default:
        return state;
    }
  };
  const [state, dispatch] = useReducer(reducers, { number: 0 });
  const { number } = state;
  return { number, dispatch };
};

• Provider全局 包裹使用上下文

  // 调用自定义Hook
  const { number, dispatch } = useGlobal();
  <globalContext.Provider value={{ value: number, dispatch }}>
      <Foo />
      <Foo2 />
    </globalContext.Provider>

• 其中 actionType

type actionType = 'add' | 'sub' | 'inv' | 'empty'; //加|减|乘方|清空
enum actionTypeEnum {
  ADD = 'add',
  SUB = 'sub',
  INV = 'inv',
  EMPTY = 'empty',
}

• 组件1中使用

interface IFooProps {}
const Foo: FC<IFooProps> = () => {
  const { value, dispatch } = useContext(globalContext);
  return (
    <div>
      <h1> 组件1 共享全局值 : {value}</h1>
      <div>
        <Radio.Group>
          <Radio.Button
            value="add"
            onClick={() => {
              dispatch?.({ type: 'add', value: 1 });
            }}
          >
            加
          </Radio.Button>
          <Radio.Button
            value="sub"
            onClick={() => {
              dispatch?.({ type: 'sub', value: 1 });
            }}
          >
            减
          </Radio.Button>
          <Radio.Button
            value="inv"
            onClick={() => {
              dispatch?.({ type: 'inv', value: 1 });
            }}
          >
            乘方
          </Radio.Button>
          <Radio.Button
            value="empty"
            onClick={() => {
              dispatch?.({ type: 'empty' });
            }}
          >
            清零
          </Radio.Button>
        </Radio.Group>
      </div>
    </div>
  );
};

• 组件2 使用

const Foo2: FC<IFooProps> = () => {
  const { value } = useContext(globalContext);
  return <h1 style={{ marginTop: '20px' }}>组件2 共享全局值: {value}</h1>;
};

标签：react,const,dispatch,number,value,---,state,笔记,return
来源： https://blog.csdn.net/cxylcc/article/details/120321753

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。