标签: redux-store

我正在使用Redux进行状态管理.
如何将商店重置为初始状态？

例如,假设我有两个用户帐户(u1和u2).
想象一下以下一系列事件:

1. 用户u1登录应用程序并执行某些操作,因此我们会在商店中缓存一些数据.

2. 用户u1注销.

3. 用户u2无需刷新浏览器即可登录应用程序.

此时,缓存的数据将与之关联u1,我想将其清理干净.

当第一个用户注销时,如何将Redux存储重置为其初始状态？

问题

我们有一个非常复杂的应用程序,我们不希望在每个测试用例中完成整个过程以到达特定的屏幕来测试它,或者我们只想跳转到具有存储在redux存储中的某个状态的特定应用程序.

我尝试

了多少初始状态,加载特定的屏幕,所以我可以直接测试它,每次运行排毒测试我加载不同的mocha.opts来选择这部分测试用例并使用'react-native-config'所以我可以在每次运行中加载不同的状态,例如,为了加载屏幕,我将执行以下操作:

1. 为redux store创建initialState,其中包含我正在测试的屏幕的所有详细信息.
2. 通过在其中指定-f标志,创建mocha.opts以仅运行此测试用例.
3. 创建.env.test.screenX文件,它将告诉商店根据我选择的ENVFILE加载哪个初始状态.
4. 在排毒中为每个屏幕创建不同的配置,以便它可以通过detox CLI加载正确的mocha opts.
5. 每次我运行命令ENVFILE = env.test.screenX react-native run-ios所以项目将使用这个配置构建,然后我可以运行detox测试-c.

题

我的方法是如此复杂,需要很多设置和开销来运行每个屏幕的测试,所以我想知道是否有任何人有相同的问题,我怎么能解决它？一般来说,如何在排毒中处理反应原生线程？

所以我对redux-store的实现可能不是最好的,而且我对Jest的了解是最小的.

我有三个文件,包括......

1. 一个模块
2. 反应组件
3. (正常)商店,默认导出

我的测试文件如下所示:

// file.test.js


jest.mock( 'store', () => jest.fn() )

// external
import React from 'react'
import configureStore from 'redux-mock-store'

// internal
import Component from 'components/Component'
import store from 'store'

describe( 'Test My Component', () => {
    const mockStore = configureStore()

    it ( 'should equal true', () => {
        const initialState = { active: true }

        store.mockImplementation(() => mockStore( initialState ))

        expect( store.getState().active ).toBe( true )
    } )
} );

我嘲笑商店的原因是因为<Component />我正在使用一个模块,它本身导入相同的store并且拥有一些正在利用的功能 …

我想知道是否有办法在创建商店后注入 Redux 商店中间件？

我想要一些类似的东西：

injectMiddleware(store, [middleware1, middleware2]);

以类似的方式，我们可以在创建商店后使用replaceReducer https://redux.js.org/api-reference/store#replaceReducer 动态替换 root reducer 。

我有一个运行 redux 和 thunk 的 React 应用程序，它一直运行良好。我需要在页面重新加载时保持存储状态，以便数据不会丢失，因此创建了一个将数据存储在 localstorage 中的函数，然后返回准备添加到 createStore 的数据（https://stackoverflow.com/a/ 45857898/801861）。数据存储工作正常并返回准备设置状态的对象。在 createStore 中添加数据对象时，反应无法编译并出现此错误：

错误：看起来您正在将多个商店增强器传递给 createStore()。这不受支持。相反，将它们组合成一个函数

这是当前代码返回错误：

const store = createStore(reducers, LoadState, applyMiddleware(thunk) );

//Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function

我正在运行的原始代码：

const store = createStore(reducers, applyMiddleware(thunk) );

我试图在我在网上找到的一些类似问题之后解决这个问题，编译但破坏了最初工作正常的站点代码：

const composeEnhancers = LoadState || compose;
const store = createStore(reducers, composeEnhancers( applyMiddleware(thunk) ) );
//Error: Actions must be plain objects. Use custom …

我见过这两种方法？：在这个例子中，这是从 Dan Abramov 的课程中​​获取的，他正在使用这种方法？：

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() =>
        store.dispatch({
          type: 'INCREMENT'           
        })            
      }
      onDecrement={() =>
        store.dispatch({
          type: 'DECREMENT'           
        })            
      }
    />,
    document.getElementById('root')
  );
};

store.subscribe(render);

Redux 中的 store.subscribe() 函数允许添加在分发操作时调用的侦听器。

在另一个示例中，这是 Redux 文档中的一个示例？：

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

不使用 store.subscribe ，而是将整个 App 包装在一个<Provider>组件中。

这两种方法有什么区别？？看起来他们正在做同样的事情，那就是确保应用程序具有最新版本的状态。

如果我已经用<Provider>.