React Redux 不会重置某些组件的存储

Posted 2023-02-22

【中文标题】React Redux 不会重置某些组件的存储

【英文标题】：React Redux will not reset store of some component

【发布时间】：2020-03-29 14:27:12

【问题描述】：

我的 redux 商店有一个奇怪的问题： 我可以在我的应用程序中设置它，但我想在注销时将其重置为组件的 initialState。 在这个特定的组件上似乎没有任何工作。在其他组件中，root reducer 方法有效。这是一个比较大的项目，但我很确定，我的组件逻辑和工作组件是一样的。

reducer 看起来像这样：

const initialState = 
    myList: [
        
          key: 'ListKey1',
          formats: [],
          selectedFormat: '',
          printer: ,
        ,
        
          key: 'ListKey2',
          active: false,
          formats: [],
          selectedFormat: '',
          printer: ,
        ,
        
          key: 'ListKey3',
          active: false,
          formats: [],
          selectedFormat: '',
          printer: ,
        ,
      ],
;


export default function myReducer(state = initialState, action) 
  switch (action.type) 
    ...
    ...
    default:
      return state;
  

我尝试了rootReducer方法：

const rootReducer = (state, action) => 
    if (action.type === 'LOGOUT') 
      return appReducer(undefined, action);
    

    return appReducer(state, action);
  ;

这似乎并没有触及初始状态。

我还尝试了“老式”的方式，通过在减速器中捕获注销案例。 这也无济于事。

    ...
    case 'LOGOUT':
        return initialState;
    default:
        return state;
    ...

当我用空数组替换 initialState 时，它​​会工作/覆盖状态。

    ...
    case 'LOGOUT':
        return [];
    default:
        return state;
    ...

但这当然不适合我的应用

也许这里的任何人都可以提供帮助，你是我最后的选择，谷歌搜索没有多大帮助。 干杯! :D

更新：

这是我的mapStateToProps

const mapStateToProps = (state) => (
  selectedList: state.settings.myList,
);

【问题讨论】：

除非你绝对需要 Redux，否则我建议只使用 React hooks 和全局存储，比如 Reactn。更少的代码和更少的类。

很遗憾，这不取决于我，而且我们也在使用 sagas，所以它可能会限制选择。

简洁的代码不是建议不要使用 Redux imo。我不会轻易传播这个建议。

【参考方案1】：

解决方案：

仔细观察Immutable Update Patterns 听了其他人的话，我意识到我的 selectedList 设置器可能正在改变状态：

handleFormatSelect = (format, index) => 
    const  myList, updateMyList = this.props;
    let tmpList = myList;     //This is not creating a new instance, but a reference
    tmpList [index].selectedFormat = format;
    updateMyList(tmpPrintersList);
  ;

我还更改了 myList 对象，因此我不必访问嵌套对象。 （这是一个皮塔饼，看 redux wiki）

  ...
  ListKey1: 
    key: 'ListKey1',
    formats: [],
    selectedFormat: '',
    printer: ,
  ,
  ListKey2: 
    key: 'ListKey2',
    active: false,
    formats: [],
    selectedFormat: '',
    printer: ,
  ,
  ListKey3: 
    key: 'ListKey3',
    active: false,
    formats: [],
    selectedFormat: '',
    printer: ,
  ,
  ...

最后，我还将设置函数更新为不改变状态：

  handleFormatSelect = (format, listKey) => 
    const tmpKey = Object.assign(, listKey);
    tmpKey.selectedFormat = format;
    this.updateMyList(tmpKey);
  ;

【参考方案2】：

仅当您对数据有不同的引用时，组件才会重新呈现。例如您的初始值将在开始时设置，然后如果您将存储值再次设置为相同对象的初始值，组件将不会重新渲染。您只需要更新参考。

case 'LOGOUT':
   return  myList: [...initialState.myList ] ;
default:
   return state;

【讨论】：

@Freez 不，如果当前存储状态与初始状态相同，则不会重新渲染

如果当前存储状态等于初始状态为什么会再次渲染视图？

@Freez 这就是我要说的。它不会重新渲染

不一样，否则没关系，我要空，但我的值在里面

谢谢@A.Benjamins。检查你的 reducer 实现，也许你在某个时候改变了 initialState，所以 React/Redux 无法产生差异。