Blazor+Fluxor跨组件状态更新不显示问题求助

你遇到的问题核心是Fluxor要求状态必须是不可变的，你的Reducer直接修改了原FilterState里的Filters集合（比如Add元素、替换列表项），没有创建新的FilterState实例。Fluxor通过检测状态实例的引用变化来通知组件更新，原状态引用没改，组件自然不会刷新显示新数据。

修改Reducer，每次更新状态时都返回全新的FilterState实例，并且对Filters集合进行复制修改，而不是直接操作原集合：

using Fluxor;
using GUI.Store.Actions;

namespace GUI.Store.FilterUseCase
{
    public static class Reducers
    {
        [ReducerMethod]
        public static FilterState ReduceUpdateFilterAction(FilterState state, UpdateFilterAction action)
        {
            // 复制原Filters到新列表，避免修改原集合
            var updatedFilters = new List<Data.Filter>(state.Filters);
            var existingIndex = updatedFilters.FindIndex(f => f.InternalName == action.Filter.InternalName);
            
            if (existingIndex != -1)
            {
                // 替换已有元素
                updatedFilters[existingIndex] = action.Filter;
            }
            else
            {
                // 添加新元素
                updatedFilters.Add(action.Filter);
            }
            
            // 返回全新的FilterState实例，而不是修改原state
            return new FilterState
            {
                Filters = updatedFilters
                // 如果FilterState还有其他属性，也要一并复制过来
            };
        }
    }
}

1. 确保你的FilterState类定义正确，比如Filters属性可正常赋值：

public class FilterState
{
    public List<Data.Filter> Filters { get; set; } = new List<Data.Filter>();
    // 其他属性...
}

如果想用只读集合，可调整为：

public class FilterState
{
    public IReadOnlyList<Data.Filter> Filters { get; }

    public FilterState(IReadOnlyList<Data.Filter> filters)
    {
        Filters = filters;
    }

    // 无参构造函数用于初始状态
    public FilterState() : this(new List<Data.Filter>()) { }
}

对应的Reducer返回时改为new FilterState(updatedFilters.AsReadOnly())即可。

2. 目标组件已经继承FluxorComponent，这部分无需调整，状态引用变化后会自动触发组件刷新。

修改后，每次状态更新都会生成新的FilterState实例，Fluxor能检测到引用变化，通知目标组件重新渲染，就能正常显示更新后的状态了。

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