关于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>
);
}
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » React Redux使用@reduxjs/toolkit的hooks
发表评论 取消回复