What are /r/reduxjs' favorite Products & Services?

From 3.5 billion Reddit comments

Watching Dan Abramov's first talk on redux and completing the egghead.io “Getting Started with Redux” course made me understand and fall in love with redux.

Using a custom svelte store like the one in this example: https://svelte.dev/tutorial/custom-stores

That way all you state changes are in the file you defined. At the end of the day in the component it's not any different then defining all those through the reducer.

Oof we have like a 400 line case statement that makes me want to shoot myself and I was told that was standard practice :( though each case in it's own file is far far far worse. I'd rather a 400 line case statement than 100 files that clutter the entire file tree.

I definitely think our platform has enough data flowing through it that needs to be shared in certain ways that having a store is useful, and I would say we actually underuse it

For your mapStateToProps and mapDispatchToProps example, I find that they're in such close proximity to the place where they're used and they're not exported from the module (at least, I don't export mine), that I don't sweat it if these are declared as any. But if you want to have 100% typing then you could solve your issue like this:

export type LoginMapProps = { email: string; password: string; } export type LoginDispProps = { tryLogin(email: string, password: string): void; }; export type LoginProps = LoginMapProps & LoginDispProps;

export class Login extends React.Component<LoginProps, void> { // ... }

function mapStateToProps(state: any): LoginMapProps { ... } function mapDispatchToProps(dispatch: (action: Action) => void): LoginDispProps { ... }

Check out advanced typing here: https://www.typescriptlang.org/docs/handbook/advanced-types.html

You should specifically go through the React hooks docs intro page, the ReactConf intro video linked there, and the post Why React Hooks?

Seems like your application doesn’t need Redux. Still you can take advantage of Context API even if you’re using class based components. Check this. Even though you have only few values to store you will find yourself in the situation of passing these values as props across components. This is known as Prop Drilling. Context API will make your life easier.

Here is a basic example that demonstrates how one could use reduxjs/toolkit's createEntityAdapter, createSlice, createAsyncThunk and createSelector.

Action types, action creators, and selectors are not redux-specific. React's useReducer docs gives an example of dispatching an action with type, and selectors are just plain functions.

Also, I would argue in favor of exporting action types because it lets reducers outside the module respond to the module's actions. One simple example is if the root reducer needs to do a one-off state update when a module action is dispatched:

const { reducer: myModuleReducer, actionTypes: myModuleActionTypes } = createMyModule();

const rootReducer = (state = {}, action) => { // do something if the action is a module action if (Object.values(myModuleActionTypes).includes(action.type)) { return { ...state, something: 'whatever', } }

return ({ myModule: myModuleReducer(state.myModule, action), // ... }) };

Dan Abmarov (one of the authors of Redux) made a pretty good explanation on how to do just that.

Note: It uses the localStorage in the browser to achieve this. Make sure it fits within the requirements for the assignment before using this.

https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

Best of luck.