rtk-config-store

Redux toolkit config store with next.

installation

npm install @jswork/rtk-config-store

usage

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;

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>;
}

define a slice use nx.$createSlice

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;
    }
  },
  watch: {
    profile: (newValue, oldValue, objectPath) => {
      console.log('profile:', newVal, oldVal, objectPath);
    }
  }
});

types

/// <reference types="@jswork/rtk-config-store/global.d.ts" />

license

Code released under the MIT license.