Redux/React技术问题：过滤Redux状态后无法获取完整Store

Hey there, let's break down where things might be going wrong with your Redux todo filter setup! It sounds like your filter logic is accidentally modifying the original todo list in your store instead of just calculating which todos to display—super common pitfall when starting with Redux filters.

Here are the key areas to check and fix:

1. Verify your Redux state structure first #

Your store should keep raw todos data separate from the active filter value. If you're merging these or modifying the todos array directly when filtering, that's why your state is getting "cut". A proper initial state should look like this:

const initialState = {
  todos: [], // Full, unfiltered list of all todos
  activeFilter: 'VISIBLE_TODO_ALL' // Just the current filter setting
};

2. Move filtering logic to a selector (not your reducer!) #

Filters should create derived data, not mutate your source state. Instead of modifying the todos array in a reducer, write a selector function that calculates which todos to display based on the current filter. Example:

// Create a selector to get filtered todos
export const getVisibleTodos = (state) => {
  const { todos, activeFilter } = state;
  
  switch (activeFilter) {
    case 'VISIBLE_TODO_ACTIVE':
      return todos.filter(todo => !todo.completed);
    case 'VISIBLE_TODO_COMPLETED':
      return todos.filter(todo => todo.completed);
    case 'VISIBLE_TODO_ALL':
    default:
      return [...todos]; // Return a copy to avoid accidental mutations
  }
};

3. Fix your filter reducer to only update the filter value #

Your filter reducer should never touch the todos array. Its sole job is to update the activeFilter state when a filter action is dispatched:

const filterReducer = (state = 'VISIBLE_TODO_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.payload.filter; // Only update the filter setting
    default:
      return state;
  }
};

// Combine with your todos reducer in the root reducer
import { combineReducers } from 'redux';
import todosReducer from './todosReducer';

const rootReducer = combineReducers({
  todos: todosReducer,
  activeFilter: filterReducer
});

4. Use the selector in your component to get filtered todos #

In your React component, fetch the filtered todos using your selector instead of pulling the raw todos array directly from the store. With React-Redux's useSelector:

import { useSelector } from 'react-redux';
import { getVisibleTodos } from './selectors';

const TodoList = () => {
  // Get only the todos that match the current filter
  const visibleTodos = useSelector(getVisibleTodos);
  
  return (
    <ul>
      {visibleTodos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

5. Double-check for accidental state mutations #

If you're using methods like splice(), pop(), or direct array index assignments in your reducer, you're mutating the original state directly. Always return new arrays/objects when updating state—use filter(), map(), or the spread operator ([...state.todos]) instead.

The core issue here is that you're modifying the source todo data in your store instead of deriving the visible todos from the full list + filter setting. By keeping the raw todos intact and using selectors to calculate what to display, you'll avoid "cutting" your state and get the filter behavior you want.

内容的提问来源于stack exchange，提问作者Max Wolfen