vite4加react18加ts-安装篇; 最近从vue3转型学习了,react相关技术架构,去有意识的去学习了相关东西,内容比较实用,没有引入太多原理和概念,就是最直接最实用的记录下来;
安装
npm install @reduxjs/toolkit
npm install react-redux
概念
redux: 是的官方 React UI 绑定层,允许您的 React 组件从 Redux 存储中读取数据,
并将操作分派到存储以更新状态。
@reduxjs/toolkit:是对 Redux 的二次封装,开箱即用可的一个高效的 Redux
开发工具集,使得创建store、更新store。
项目中版本
"@reduxjs/toolkit": "^1.9.1",
"react-redux": "^8.0.5",
创建store目录
src▽
store▽
slices▽
user.tsx
index.tsx
编写src/store/slices/user.tsx
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface UserState {
name: string;
age: number;
}
const initialState: UserState = {
name: '器灵',
age: 20
}
export const userSlice = createSlice({
name: 'user',
// state数据的初始值
initialState: initialState,
reducers: {
setName(state, action: PayloadAction<string>) {
// 第一个参数 state 为当前state中的数据
// 第二个参数action为{payload,type:'user/setName'}
state.name = action.payload
},
setAge(state, action: PayloadAction<number>) {
state.age = action.payload
}
}
});
// 导出外部给组件调用, 也可以不导出
export const { setName, setAge } = userSlice.actions;
编写src/store/index.txs
import { configureStore } from '@reduxjs/toolkit'
import { userSlice } from './slices/user';
const store = configureStore({
reducer: {
user: userSlice.reducer //user module
},
devTools: true
});
// 定义 ts types
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;
使用store
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux';
import store from './store/index';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<Provider store={store}>
<App />
</Provider>
);
组件中使用
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '@/store/index';
import { setName } from '@/store/slices/user';
function Login() {
const { user } = useSelector((state: RootState) => state);
const dispatch = useDispatch();
return(
<div>
<div>{user.name}</div>
// 第一种方法调用user暴露方法
<button onClick="() => {
dispatch(setName('掘金'));
}">修改userName</button>
/* 第二种直接修改 type: 'user/xxx';
user: 对应slices/user中对应name;
'/xxx'; xxx: 对应slices/user中reducers定义方法名
*/
<button onClick="() => {
dispatch({type: 'user/setName', payload: '绝金-稀土'});
}">修改userName</button>
</div>
)
}
export default Login;