Spread syntax in Redux configureStore (Redux Toolkit)

Question

I'm using create-react-app . --template redux and I want to use spread syntax inside the configureStore reducer.

Like this:

import { configureStore } from '@reduxjs/toolkit';

import aReducer from './a/slice';
import bReducer from './b/slice';
import cReducer from './c/slice';

export default configureStore({
  reducer: {
    a: aReducer,
    b: bReducer,
    ...cReducer
  },
});

Inside the cReducer which is in its own folder with slice.js and utils.js, I have a few properties which I don’t want to have in the separate object inside the store, but I want it to be at the root of the store.

How can I achieve that?

Answer 1

The intend of your question is not clear. Are you having problem with the spread uses or how to compose the store object.

below are a few solutions based of assumptions:

1. If you want the properties prop1 and prop2 in the configureStore directly. just reference them and add them at the root level of store.

   import aReducer from './a/slice';
   import bReducer from './b/slice';
   import cReducer from './c/slice';
   
   const {prop1, prop2} = cReducer;
   
   export default configureStore({
     reducer: {
       a: aReducer,
       b: bReducer,           
     },   
       prop1,
       prop2,       
   }); 
   

2. If by root you meant in the reducer object.

   import aReducer from './a/slice';
   import bReducer from './b/slice';
   import cReducer from './c/slice';
   
   const {prop1, prop2} = cReducer;
   
   export default configureStore({
     reducer: {
       a: aReducer,
       b: bReducer,
       prop1,
       prop2,
     },          
   });
   

you can also alias the props:

    const {prop1, prop2} = cReducer;
    
    export default configureStore({
      reducer: {
        a: aReducer,
        b: bReducer,            
      },     
       c: prop1,
       d: prop2,     
    });

Note: BTW if you want the cReducer also in the object you can simply add that as well, as you already have.

If you wish to add a subset of props of cReducer, you can compose a new object using lodash omit function. see omit

const cReducerWithout = omit(cReducer, 'propx')

and use the cReducerWithout in your store.

Answer 2

From ES2018 (ES9) You can do this:

import cReducer from './c/slice';

const { dontWantThis, dontWantThis2, ...restOfcReducer } = cReducer;

export default configureStore({
  reducer: {
    a: aReducer,
    b: bReducer,
    ...restOfcReducer
  },
});

Check this article for more: https://dmitripavlutin.com/javascript-object-destructuring/#8-rest-object-after-destructuring