Redux slices and actions in React Native - Build, Publish & Deploy

Build & Publish - Redux slices and actions

Performance Impact of Redux Slices and Actions

Using Redux slices and actions helps organize state updates clearly. This can improve app performance by reducing unnecessary re-renders. Properly designed slices keep state changes local and predictable, helping maintain a smooth 60fps UI. However, large or deeply nested state slices can increase memory use and slow updates, affecting frame rate and battery life.

💻

How to Optimize Redux Slices and Actions for 60fps Rendering

• Keep slices small and focused to avoid large state updates.
• Use memoization (e.g., useSelector with shallow equality) to prevent unnecessary re-renders.
• Batch multiple actions when possible to reduce render cycles.
• Avoid heavy computations inside reducers; do them before dispatching actions.
• Use Redux Toolkit's createSlice for efficient immutable updates.

Impact on App Bundle Size and Startup Time

Redux slices and actions add minimal size overhead because Redux Toolkit is lightweight. However, adding many slices or large middleware can increase bundle size and slow startup. Tree-shaking and code splitting help keep the app size small. Keeping slices modular and importing only needed parts reduces startup time and memory use.

iOS vs Android Differences for Redux Slices and Actions

Redux logic is platform-independent since it runs in JavaScript. However, performance can vary: Android devices often have more memory but slower CPUs, so optimizing state updates is crucial. iOS devices prioritize smooth animations, so avoiding heavy Redux updates during animations helps. Debugging Redux state is similar on both platforms using React Native Debugger or Flipper.

Relevant Store Review Guidelines and Requirements

• Ensure your app does not block the main thread with heavy Redux computations to avoid app freezes.
• Follow Apple's Human Interface Guidelines to keep UI responsive during state updates.
• On Google Play, avoid excessive background processing triggered by Redux actions to comply with battery usage policies.
• Use secure coding practices in Redux actions to prevent injection or data leaks.

Self-Check: Your App Takes 5 Seconds to Load This Screen. What's Likely Wrong?

Likely causes include large or complex Redux slices causing slow state initialization, or too many synchronous actions firing at once. Also check if heavy computations are done inside reducers or selectors instead of before dispatch. Optimizing slice size, memoizing selectors, and batching actions can fix slow screen loads.

Key Result

Redux slices and actions help organize state updates efficiently, improving UI smoothness and reducing unnecessary renders. Optimizing slice size and memoizing selectors are key to maintaining 60fps performance and fast app startup.

Practice

1. What is the main purpose of a Redux slice in a React Native app?

easy

A. To create UI components automatically

B. To style the app with CSS

C. To handle navigation between screens

D. To group related state and actions together for easier management

Solution

1. Step 1: Understand Redux slice role

   A slice groups state and actions related to a feature in one place.

2. Step 2: Compare with other options

   Options A, C, and D are unrelated to state management.

3. Final Answer:

   To group related state and actions together for easier management -> Option D

4. Quick Check:

   Redux slice = group state and actions [OK]

Hint: Slices bundle state and actions for one feature [OK]

Common Mistakes:

• Confusing slices with UI components
• Thinking slices handle navigation
• Assuming slices style the app

2. Which of the following is the correct way to define an action inside a Redux slice using createSlice?

easy

A. reducers: { increment: (state) => { state.value += 1 } }

B. actions: { increment: () => state.value += 1 }

C. reducers: { increment: () => state.value += 1 }

D. actions: { increment: (state) => { return state.value + 1 } }

Solution

1. Step 1: Recall createSlice syntax

   Reducers are defined as functions with (state) parameter that mutate state directly.

2. Step 2: Check each option

   reducers: { increment: (state) => { state.value += 1 } } correctly uses reducers with state mutation. Options B and D wrongly use 'actions' key. reducers: { increment: () => state.value += 1 } uses arrow function without braces, which won't mutate state properly.

3. Final Answer:

   reducers: { increment: (state) => { state.value += 1 } } -> Option A

4. Quick Check:

   Reducers mutate state inside createSlice [OK]

Hint: Reducers mutate state; actions key is not used in createSlice [OK]

Common Mistakes:

• Using 'actions' instead of 'reducers' key
• Not mutating state directly inside reducer
• Returning new state instead of mutating

3. Given this slice code:

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 }
  }
});

const state = { value: 5 };
counterSlice.reducer(state, { type: 'counter/increment' });
console.log(state.value);

What will be logged to the console?

medium

A. 6

B. 5

C. NaN

D. Error

Solution

1. Step 1: Understand reducer call

   The reducer receives state { value: 5 } and action type 'counter/increment'. It runs increment reducer which adds 1 to state.value.

2. Step 2: Calculate new state value

   5 + 1 = 6, so state.value becomes 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Increment action adds 1 to value [OK]

Hint: Reducer mutates state.value by +1 on increment action [OK]

Common Mistakes:

• Thinking state is immutable and unchanged
• Confusing action type format
• Expecting error due to direct mutation

4. You wrote this slice but dispatching the action does not update the state:

const todoSlice = createSlice({
  name: 'todo',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    }
  }
});

// Later in component
dispatch(todoSlice.actions.addTodo('Buy milk'));

What is the most likely reason the UI does not update?

medium

A. The reducer mutates state directly which is not allowed

B. The initialState should be an object, not an array

C. The slice reducer is not added to the store

D. The action payload is missing

Solution

1. Step 1: Check reducer code

   The reducer correctly mutates state array by pushing new todo, which is allowed with Immer in createSlice.

2. Step 2: Identify missing integration

   If UI does not update, likely the slice reducer is not connected to the Redux store, so dispatch has no effect.

3. Final Answer:

   The slice reducer is not added to the store -> Option C

4. Quick Check:

   Reducer must be in store for dispatch to update state [OK]

Hint: Always add slice reducer to store for updates [OK]

Common Mistakes:

• Thinking direct mutation is forbidden in createSlice
• Assuming initialState must be object
• Forgetting to add reducer to store

5. You want to create a Redux slice that manages a list of users and includes an action to update a user's name by id. Which code snippet correctly implements this?

hard

A. reducers: { updateName: (state, action) => { state.filter(u => u.id !== action.payload.id).push(action.payload); } }

B. reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } }

C. reducers: { updateName: (state, action) => { state = state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } }

D. reducers: { updateName: (state, action) => { state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } }

Solution

1. Step 1: Understand mutation in createSlice

   Reducers can mutate state directly because Immer handles immutability internally.

2. Step 2: Analyze each option

   reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } } finds user by id and mutates name directly, which is correct. reducers: { updateName: (state, action) => { state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } } executes map but discards the new array without returning it or mutating state, incorrect. reducers: { updateName: (state, action) => { state = state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } } tries to assign new array to state variable, which does not update state correctly. reducers: { updateName: (state, action) => { state.filter(u => u.id !== action.payload.id).push(action.payload); } } filters out user and pushes new one, which mutates array incorrectly and may cause bugs.

3. Final Answer:

   reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } } -> Option B

4. Quick Check:

   Direct mutation with find and update is correct in createSlice [OK]

Hint: Use find and mutate user directly inside reducer [OK]

Common Mistakes:

• Trying to reassign state variable inside reducer
• Using filter and push incorrectly
• Not mutating state directly in createSlice