best practice using reducers from of other components redux-toolkit react-boilerplate

Question

I'm rather a python Guy but I've been trying react for some. This whole react ecosystem evolves so fast that after a few months of break I cannot recognize the word anymore :)

Trying to write simple geo mapping app: using: react-boilerplate-cra-template To simplify things I have

<MyHomePage>
<Div>
    <MyMapApplet/>
    <MyFilter>
        <RadioButtonGroup>
            <RadioButton/>
            <RadioButton/>
        </RadioButtonGroup>
    </MyFilter>
</Div>
</MyHomePage>

Question what are best practices regarding reducers and selectors from other components.

I have a simple reducer (createSlice in slice.ts) / selector (reselect selectors.ts) defined on RadioButtonGroup that sets the value of currently selected radio button. That works fine.

// The initial state of the RadioRatGroup container
export const initialState: ContainerState = {
  netrat: '4G',
};

const radioRatGroupSlice = createSlice({
  name: 'radioRatGroup',
  initialState,
  reducers: {
    setNetRat(state, action: PayloadAction<any>) {
      state.netrat = action.payload;
    },
  },
});

and selector

const selectDomain = (state: RootState) => state.radioRatGroup || initialState;

export const selectNetRat = createSelector(
  [selectDomain],
  radioRatGroupState => radioRatGroupState.netrat,
);

Can I just include e.g same Selector in other components like eg. MyMapApplet by using

import { selectNetRat } from 'app/components/RadioButtonGroup/selectors';

or is it a bad manner that I should avoid?

How shall get the reference (pointer?) to the value set by some other component and saved to store?

As far as I understood Redux would be a great "centralized" store to keep track of the state of the application (saved values/objects). In boilerplate / sliced / redux-toolkit approach everything seems to be a bit "decentralized" again?

Thanks for clarification and I'm really sorry if I mix some of the things.

score 1 · Answer 1 · answered Jul 27 '20 at 18:19

It is perfectly valid to use a selector anywhere you need that segment of data. If you use the same selector in many components and the value in the store is updated (be it by a specific component, by middleware, etc), all of those subscribed components will be rerendered and your reference will be updated to the latest value.

Regarding your feelings about things being decentralized or confusing, that's probably 100% coming from that boilerplate as it seems overly complex for most applications (specifically saga and injected reducers usage). I'd recommend reading through the new redux essentials guide before moving forward so you can better understand the foundation that the boilerplate is trying to create abstractions for. It'll answer your questions about slices, grouping by features (aka ducks pattern, and in this boilerplate, 'containers'), how selectors work, and more.

best practice using reducers from of other components redux-toolkit react-boilerplate

1 Answers1