Redux State Management - Dumps

Hola hola,

Summary
In this article, we will be covering one of a few different redux 'slice types' that we use at THT. The most basic slice type is what we call dump slices.

Assumptions
For the following information, I will assume the following:

1. You've worked with Redux before and have a solid grasp of the basics.
2. You have an existing React Native project setup using TypeScript.

store.ts

To start, let's imagine that tou've got the following store.ts file

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

export const store = configureStore({
  reducer: {
    users,
  },
});

Nothing fancy here - we're just creating one Redux slice and calling it users.

The dump

The dump is where we keep all of the retrieved documents for one collection of data. For example, if you retrieved all local Users, you would store them inside of a .users slice.

This .users slice would be an object:

import {User} from '@/model/index';
import {createSlice, PayloadAction} from '@reduxjs/toolkit';
import {TypedUseSelectorHook, useSelector} from 'react-redux';

export type UsersSlice = {

};

const initialState: InitialState = {};

export const users = createSlice({
  name: 'users',
  initialState,
  reducers: {
    add: (state, action: PayloadAction<User[]>) => {
      const users = action.payload;

      users.forEach(user => {
        state[user.email] = user;
      });
    },
    remove: (state, action: PayloadAction<string>) => {
      const id = action.payload;

      delete state[id];
    },
  },
});

export const UsersActions = users.actions;

export default users.reducer;

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

When first loading an app, we sometimes load multiple Users based on the UX.

Imagine an initial app load for a Social Media App. On app load, we might load the 10 most recent Posts and the Users to created them.

We store all of these Users inside of the users slice. We also store all of the Posts we've retrieved (i.e., the 10 most recent) inside of the posts slice.

Benefits of using a dump

Easy access Related Documents
We have the following Post type:

type Post = {
 id: string;
 createdDate: number;
 /**
 * The User.id value of the User that created the Post
 */
 user: string;
};

Let's say that we're looking at a Post and on this Post there is a section that has some User information such as their Name and Profile Photo.

Here's how we would show this information:

type Props = {
  post: Post;
};

const PostComponent = (props: Props) => {
  const {post} = props;

  const users = useAppSelector(state => state.users);

  const userForPost = useMemo(() => users[post.user], [user, post.user]);

  return (
    <View style={styles.container}>
     <Image src={userForPost.image} style={styles.image} />
     <View>
       <Text style={styles.name}>{userForPost.name}</Text>
       <Ratings rating={5} />
     </View>
    </View>
  );
};

As needed, developers can use the id of the selected User to retrieve the entirety of the User document.

This type of redux state management makes is easy and extremely consistent across data types.

We have dumps for all different type of data.

• Matt