rtk-config-store: 基于 redux-toolkits 的状态管理库
基于 redux-toolkits 扩展的一些功能
项目主页: https://github.com/afeiship/rtk-config-store
特性展示
功能 | 场景 | 代码 |
---|---|---|
nx.$get | 在非hook场景上取值,值不会更新 UI |
|
nx.$use | 在 hook 场景下取值,值会更新 UI |
|
nx.$patch | 代替 dispatch(即 useDispatch 的场景) |
|
nx.$store | 全局的 rootStore 引用 | - |
nx.$slice | 所有的 slice key/value 引用 | - |
nx.$createSlice | 代替 createSlice,具有 watch 的 key |
|
nx.$event | 全局 emit 了2个事件 如果没有 nx.$event 存在,则不存在这个注册行为
|
|
安装
yarn add @jswork/rtk-config-store
/// <reference types="@jswork/rtk-config-store/global.d.ts" />
tsconfig.ts 配置
{
"compilerOptions": {
"noImplicitAny": false,
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
使用
src/store.ts
import { scanWebpack } from '@jswork/scan-modules';
import RtkConfigStore from '@jswork/rtk-config-store';
// when webpack
const context = require.context('./modules', true, /\.ts$/);
const modules = scanWebpack(context, { modules: '/modules/' });
export const store = RtkConfigStore({ modules, preloadedState: {}, reducer: {} });
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
入口 Provider 保持不变,main/app.ts
import { Provider } from 'react-redux';
import { store } from '@/shared/stores/root';
interface IReduxProviderProps extends React.PropsWithChildren {}
export default function (props: IReduxProviderProps) {
const { children } = props;
return <Provider store={store}>{children}</Provider>;
}
创建一个 store
其实就是扩展了一个 watch ,借助了 redux-watch
export default nx.$createSlice({
name: 'user',
initialState: {
token: null,
profile: JSON.parse(localStorage.getItem('profile'))
},
reducers: {
setToken: (state, action) => {
state.token = action.payload;
},
setProfile: (state, action) => {
state.profile = action.payload;
}
},
selectors: {
username: (state)=> state.profile.login
},
watch: {
profile: (newValue, oldValue, objectPath) => {
console.log('profile:', newVal, oldVal, objectPath);
}
}
});