1. 简介:
Redux 是一种用于管理应用程序状态的 JavaScript 库。它是一个可预测的状态容器,可以用于编写
可维护和可扩展的应用程序。
@reduxjs/toolkit 是一个官方提供的 Redux 工具包,它可以帮助简化 Redux 应用程序的开发,并
提供常用的 Redux 原生方法,例如创建 Redux store、定义 reducer、处理异步操作等。
2. 用法:
首先,我们需要安装 @reduxjs/toolkit 和 react-redux
npm install @reduxjs/toolkit react-redux -S
1> 引入Provider,对根目录进行一个包装
import { Provider } from 'react-redux';
import store from './store/index.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={srore}>
<App />
</Provider>
);
2> 编写store文件,利用@reduxjs/toolkit工具的configureStore创建store
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './reducers/user';
const store = configureStore({
reducer: {
user: userReducer
}
});
export default store;
3> 编写store下的reducers/user文件
import { createSlice } from '@reduxjs/toolkit';
let userSlice = createSlice({
name: 'user',
initialState: {
isLogin: false,
loginCount: 0
},
reducers: {
addLoginCount(state) {
state.loginCount++;
},
addLoginCountByNum(state, action) {
state.loginCount += action.payload;
}
}
});
// 外部组件来使用的action
export const { addLoginCount, addLoginCountByNum } = userSlice.actions;
// 默认导出是所有的reducer 供store注册这些方法
export default userSlice.reducer;
4>使用store
import './App.css';
import { useState, memo } from 'react';
// 取出行为
import { addLoginCount, addLoginCountByNum } from './store/reducers/user';
import { useDispatch, useSelector } from 'react-redux';
// 在子组件中使用
// 这里的memo保证props发生变化时,才更新
const Son = memo(() => {
console.log('子组件更新.....')
const user = useSelector(state => state.user);
return <h1>我是子组件{user.loginCount}</h1>
})
function App() {
const user = useSelector(state => state.user);
const dispath = useDispatch();
const [num, setNum] = useState(1);
return (
<div className="App">
{user.isLogin ? 'TRUE' : 'FALSE'} || {user.loginCount} || {num}
<button onClick={e => dispath(addLoginCount())}>更改loginCount+1</button>
<button onClick={e => dispath(addLoginCountByNum(10))}>更改loginCount</button>
<button onClick={e => setNum(num + 1)}>变更父组件</button>
<Son />
</div>
);
}
export default App;
memo用法补充:
就如上边代码,在没有用memo包装前,每次修改num的值时,子组件都会随着更新。用memo包装后,组件Son不会随num值的改变而更新。但如果num的值传给了Son组件(<Son num={num}/>
),Son组件也会跟随num的值的修改而更新了。大幅度使用会造成缓存越来越大,针对组件大一点且使用频率不是很高的情况下去使用。