项目作者: duan602728596

项目描述 :
umi3的插件,使用@reduxjs/toolkit
高级语言: JavaScript
项目地址: git://github.com/duan602728596/umi-plugin-redux-toolkit.git
创建时间: 2020-10-30T10:01:25Z
项目社区:https://github.com/duan602728596/umi-plugin-redux-toolkit

开源协议:MIT License

下载


umi-plugin-redux-toolkit

中文文档

The plugin of umi@4 uses @reduxjs/toolkit.

Install and use

If you want to use plugin, you must install first.

  1. yarn add umi-plugin-redux-toolkit @reduxjs/toolkit
  2. // or
  3. npm install umi-plugin-redux-toolkit @reduxjs/toolkit

Finish installed, you may enable the plugin.

Configuration

  • ignoreOptions { object } : Configure ignored options, refer to
    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 } : Ignore value.
    • ignoreOptions.ignoredActions { Array } : 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 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

  1. // .umirc.js or umi.config.js
  2. import { defineConfig } from 'umi';
  3. export default {
  4. // Configuration of umi-plugin-redux-toolkit
  5. reduxToolkit: {
  6. esModule: true
  7. }
  8. };

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,
Export the configuration of createSlice Reference.

  1. import { createSlice } from '@redux/toolkit';
  2. const slice = createSlice({
  3. name: 'sliceName',
  4. initialState: { value: 0 },
  5. reducers: {
  6. addValue(state, action) {
  7. state.value++;
  8. }
  9. }
  10. });
  11. const { addValue } = slice.actions;
  12. 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:

  1. import { createAction } from '@redux/toolkit';
  2. const action = createAction('sliceName/action');
  3. export default {
  4. name: 'sliceName',
  5. initialState: { value: 0 },
  6. reducers: {
  7. // will automatically change index/action into action
  8. [action](state, action) {
  9. return state;
  10. }
  11. }
  12. };

Now also supports exporting APIs created by RTK RTKQuery. E.g:

  1. import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
  2. const api = createApi({
  3. reducerPath: 'api',
  4. baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  5. endpoints(builder) {
  6. return {
  7. getData: builder.query({
  8. query: (q) => q
  9. })
  10. };
  11. }
  12. });
  13. export const { useGetDataQuery } = api;
  14. export default api;

Exporting listenerMiddleware is now also supported. E.g:

  1. import { createListenerMiddleware } from '@reduxjs/toolkit';
  2. import { setAction } from './actions';
  3. const listenerMiddleware = createListenerMiddleware();
  4. listenerMiddleware.startListening({
  5. actionCreator: setAction,
  6. effect(action, listenerApi) {
  7. console.log('Listener: setAction');
  8. }
  9. });
  10. export default listenerMiddleware;

Initial value

Export in app.js

  1. export const reduxToolkit = {
  2. initialState: {}, // Initialize the value of redux
  3. ignoreOptions: {}, // Same as the ignoreOptions configuration above, it will be merged
  4. warnAfter: 800, // If the check time of immutableCheck and serializableCheck exceeds 32ms, there will be a warning. Modify the warning time
  5. reducers: {}, // Custom add reducers
  6. middlewares: [], // Custom add middlewares
  7. treatStore(store) {} // Allows you to perform other processing on the store, such as mounting some monitoring methods
  8. };
  9. // or
  10. export function reduxToolkit() {
  11. return {
  12. initialState: () => ({}), // It can also be a function to initialize the value of redux
  13. ignoreOptions: {}, // Same as the ignoreOptions configuration above, it will be merged
  14. warnAfter: 800, // If the check time of immutableCheck and serializableCheck exceeds 32ms, there will be a warning. Modify the warning time
  15. reducers: {}, // Custom add reducers
  16. middlewares: [], // Custom add middlewares
  17. treatStore(store) {} // Allows you to perform other processing on the store, such as mounting some monitoring methods
  18. };
  19. }

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.

  1. import { dynamicReducers } from 'umi-plugin-redux-toolkit/dynamicReducers';
  2. import model_0 from './models/model_0';
  3. import model_1 from './models/model_1';
  4. function Component(props) {
  5. return <div ></div>;
  6. }
  7. export default dynamicReducers([model_0, model_1])(Component); // Multiple models pass array
  8. // or
  9. export default dynamicReducers(model_0)(Component); // Single model

Get the store object

You can get the store object in the following way:

  1. import { store } from '@@/plugin-reduxToolkit/store';