關于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><buttonaria-label="Increment value"onClick={() => dispatch(increment())}>Increment</button><span>{count}</span><buttonaria-label="Decrement value"onClick={() => dispatch(decrement())}>Decrement</button></div></div>);
}