开始了新的项目,项目中使用了react-redux集成工具的使用,那必须要学习啦,发现相关的资料和视频还是不多的,所以一起学习, 高效掌握redux/toolkit的用法, 对应在b站会出一个语音教清晰的视频。
视频配合食用 暂时录制失败 太晚了 明天吧
redux/toolkit
1.安装
首先创建react一个项目,可以参考react项目
# Redux + TypeScript template
npx create-react-app my-app --template redux
通过node的npm安装
# NPM
npm install react-redux
npm install @reduxjs/toolkit
用Yarn的同学可以
# Yarn
yarn add @reduxjs/toolkit
2. 基本使用 { createSlice }
# cmd
mkdir store ( src下创建一个store文件 )
cd store
echo nul>index.js
mkdir features ( store下创建一个features )
cd features
echo nul>counterSlice.js ( features下创建counterSlice.js文件 )
2.1 counterSlice.js
// counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name:"counter",
initialState:{
count:1,
title:"i am counter title"
}
})
reducers:{
increment:(state, payload) => {
state.count = state.count + 1 ;
},
decrement:(state, payload) => {
state.count =state.count -1;
}
}
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
2.2 index.js
import { configureStore } from '@reduxjs/toolkit'
import counter from "./features/counterSlice"
export default configStore({
//创建一个redux数据
reducer:{
counter:counterSlice
}
})
2.3 根目录 index.js
在跟目录index.js下通过react-redux中的Provider将store传递给所有的组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
2.4 App.js 组件内使用state
import Test from "./pages/test";
import { useSelector, useDispatch } from "react-redux" ; // 有了hook就不用connect连接了
import { increment, decrement } from './store/features/counterSlice'
function App() {
const { count } = useSelector(state => state.counter)
const dispatch = useDispatch() // 用来调用reducer
return (
<div className="App">
<Test/>
<button onclick={() => {
dispatch(increment())
}}>{count}</button>
</div>
);
}
export default App;
//遗留问题
export 和export default 的区别
features 含义:是用于帮助实现某种功能的具体工具, 即How to do。 例如,刹车碟片就是汽车用于实现刹车的功能的一个Feature。
react 函数的定义位置 和 this指向 .bind
fetch 使用