https://github.com/duan602728596/umi-plugin-redux-toolkit
Umi plugin, use @reduxjs/toolkit. - umi的插件，使用@reduxjs/toolkit。
https://github.com/duan602728596/umi-plugin-redux-toolkit
umi umi-plugin umi3 umi4 umijs
Last synced: 5 months ago
JSON representation
Umi plugin, use @reduxjs/toolkit. - umi的插件，使用@reduxjs/toolkit。
- Host: GitHub
- URL: https://github.com/duan602728596/umi-plugin-redux-toolkit
- Owner: duan602728596
- License: mit
- Created: 2020-10-30T10:01:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-04T10:57:09.000Z (over 2 years ago)
- Last Synced: 2025-08-09T18:09:28.665Z (10 months ago)
- Topics: umi, umi-plugin, umi3, umi4, umijs
- Language: TypeScript
- Homepage:
- Size: 1.43 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# umi-plugin-redux-toolkit
[中文文档](README_zhCN.md)
The plugin of umi@4 uses @reduxjs/toolkit.
## Install and use
If you want to use plugin, you must install first.
```
yarn add umi-plugin-redux-toolkit @reduxjs/toolkit
// or
npm install umi-plugin-redux-toolkit @reduxjs/toolkit
```
Finish installed, you may [enable the plugin](https://umijs.org/docs/guides/plugins#%E5%90%AF%E7%94%A8%E6%8F%92%E4%BB%B6).
## Configuration
* ignoreOptions { object } : Configure ignored options, refer to
[https://redux-toolkit.js.org/api/serializabilityMiddleware](https://redux-toolkit.js.org/api/serializabilityMiddleware),
When the object in redux may be created from `new Class`, or other non-serializable values,
there will be a warning when the action is obtained or called, and this option can be configured to ignore the warning.
* ignoreOptions.ignoredPaths { Array<string> } : Ignore value.
* ignoreOptions.ignoredActions { Array<string> } : Ignored actions.
* modelName { string } : Customize the name of the model folder and ignore the singular configuration after configuration.
* singular { boolean } : Whether the directory is singular.
* esModule { boolean } : Import using the es6 module method.
* ignore { string | Array } : Ignored model files. (Refer to the [ignore](https://www.npmjs.com/package/glob#options) configuration of glob)
* asyncLoadReducers { boolean } : Enable the function of asynchronously injecting reducers.
(Need to manually mount on the component, it will be more troublesome, so it is not recommended).
### How to configure
```javascript
// .umirc.js or umi.config.js
import { defineConfig } from 'umi';
export default {
// Configuration of umi-plugin-redux-toolkit
reduxToolkit: {
esModule: true
}
};
```
## How to use
Create the `models` folder, create a ts or js file under the folder, and export the slice created by createSlice, or the configuration of createSlice.
Export slice [Reference](https://github.com/duan602728596/umi-plugin-redux-toolkit/blob/main/example/src/pages/models/add.js),
Export the configuration of createSlice [Reference](https://github.com/duan602728596/umi-plugin-redux-toolkit/blob/main/example/src/pages/models/index.js).
```javascript
import { createSlice } from '@redux/toolkit';
const slice = createSlice({
name: 'sliceName',
initialState: { value: 0 },
reducers: {
addValue(state, action) {
state.value++;
}
}
});
const { addValue } = slice.actions;
export default slice;
```
When exporting the configuration of createSlice, if the reduce key is created by createAction, the namespace will be automatically removed. E.g:
```javascript
import { createAction } from '@redux/toolkit';
const action = createAction('sliceName/action');
export default {
name: 'sliceName',
initialState: { value: 0 },
reducers: {
// will automatically change index/action into action
[action](state, action) {
return state;
}
}
};
```
Now also supports exporting APIs created by RTK RTKQuery. E.g:
```javascript
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
endpoints(builder) {
return {
getData: builder.query({
query: (q) => q
})
};
}
});
export const { useGetDataQuery } = api;
export default api;
```
Exporting listenerMiddleware is now also supported. E.g:
```javascript
import { createListenerMiddleware } from '@reduxjs/toolkit';
import { setAction } from './actions';
const listenerMiddleware = createListenerMiddleware();
listenerMiddleware.startListening({
actionCreator: setAction,
effect(action, listenerApi) {
console.log('Listener: setAction');
}
});
export default listenerMiddleware;
```
## Initial value
Export in app.js
```javascript
export const reduxToolkit = {
initialState: {}, // Initialize the value of redux
ignoreOptions: {}, // Same as the ignoreOptions configuration above, it will be merged
warnAfter: 800, // If the check time of immutableCheck and serializableCheck exceeds 32ms, there will be a warning. Modify the warning time
reducers: {}, // Custom add reducers
middlewares: [], // Custom add middlewares
treatStore(store) {} // Allows you to perform other processing on the store, such as mounting some monitoring methods
};
// or
export function reduxToolkit() {
return {
initialState: () => ({}), // It can also be a function to initialize the value of redux
ignoreOptions: {}, // Same as the ignoreOptions configuration above, it will be merged
warnAfter: 800, // If the check time of immutableCheck and serializableCheck exceeds 32ms, there will be a warning. Modify the warning time
reducers: {}, // Custom add reducers
middlewares: [], // Custom add middlewares
treatStore(store) {} // Allows you to perform other processing on the store, such as mounting some monitoring methods
};
}
```
## Asynchronous injection of reducers
The `*.async.{js,jsx,ts,tsx}` files in the models folder will be considered as asynchronously injected reducers and will not be automatically loaded.
Configure `asyncLoadReducers: true` to enable asynchronous injection of reducers.
Api created by RTK RTKQuery cannot be loaded asynchronously because it needs to add middleware.
```javascript
import { dynamicReducers } from 'umi-plugin-redux-toolkit/dynamicReducers';
import model_0 from './models/model_0';
import model_1 from './models/model_1';
function Component(props) {
return
;
}
export default dynamicReducers([model_0, model_1])(Component); // Multiple models pass array
// or
export default dynamicReducers(model_0)(Component); // Single model
```
## Get the store object
You can get the store object in the following way:
```javascript
import { store } from '@@/plugin-reduxToolkit/store';
```