React Redux使用@reduxjs/toolkit的hooks

林强1812024-07-08 9:46

关于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>
  );
}