React Redux使用@reduxjs/toolkit的hooks

关于redux的学习过程需要几个官网,有redux官网,React Redux官网和Redux Toolkit的官网。
其中后者的中文没有找到,不过其中的使用在React Redux官网的快速入门中有介绍。
现在一般不使用connect借接口了。
对于借助Redux Toolkit的React Redux的应用示例可以看这个链接
https://blog.csdn.net/2202_75616310/article/details/134661399

注意:组件中使用state是从注册store的js的reducer里的key进行取用。useSelector((state) => state.counter2.value);这里的state是全局的state。
注册store的js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter2: counterReducer,
  },
});

组件使用store的js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from './counterSlice';
import styles from './Counter.module.css';

export function Counter() {
  const count = useSelector((state) => state.counter2.value);
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  );
}

相关推荐

  1. React HooksuseState、useRef使用

    2024-07-11 15:58:08       58 阅读
  2. react,hooksuseRef使用

    2024-07-11 15:58:08       40 阅读
  3. React Redux使用@reduxjs/toolkithooks

    2024-07-11 15:58:08       22 阅读
  4. React使用Valtiohook实现响应式状态管理

    2024-07-11 15:58:08       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 15:58:08       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 15:58:08       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 15:58:08       58 阅读
  4. Python语言-面向对象

    2024-07-11 15:58:08       69 阅读

热门阅读

  1. 解析Spring Cloud中的配置中心实现

    2024-07-11 15:58:08       23 阅读
  2. 05.FFMPEG日志系统

    2024-07-11 15:58:08       21 阅读
  3. react遍历数据翻页

    2024-07-11 15:58:08       23 阅读
  4. Perl 语言入门:编写并执行你的第一个脚本

    2024-07-11 15:58:08       23 阅读
  5. 具名/匿名/作用域插槽区分

    2024-07-11 15:58:08       24 阅读
  6. mysql select count返回null

    2024-07-11 15:58:08       18 阅读
  7. HTML 标签列表(功能排序)

    2024-07-11 15:58:08       21 阅读
  8. Hadoop HA ( 3.1.3 )

    2024-07-11 15:58:08       20 阅读
  9. 【智能制造-14】机器视觉软件

    2024-07-11 15:58:08       23 阅读
  10. Vue viewer 下通循环获取的图片无法预览问题

    2024-07-11 15:58:08       15 阅读
  11. sa-token前后端分离解决跨域的正确姿势

    2024-07-11 15:58:08       16 阅读