相关疑难解决方法(0)

我需要将当前状态重置为初始状态。但我所有的尝试都没有成功。我如何使用 redux-toolkit 做到这一点？

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState: {
    returned: [],
  },
  reducers: {
    reset(state) {
      //here I need to reset state of current slice
    },
  },
});

我正在使用Angular 2和ngrx/store.我想在用户调度时重置整个商店状态USER_LOGOUT.

我读了Dan Abramov关于如何重置Redux商店状态的答案？,但我没有弄清楚如何rootReducer正确编写以及在使用ngrx/store时将其放在何处.

或者还有其他方法可以在ngrx/store中处理这个问题吗？

bootstrap(App, [
    provideStore(
      compose(
        storeFreeze,
        storeLogger(),
        combineReducers
      )({
        router: routerReducer,
        foo: fooReducer,
        bar: barReducer
      })
    )
  ]);

问题

我们有一个非常复杂的应用程序,我们不希望在每个测试用例中完成整个过程以到达特定的屏幕来测试它,或者我们只想跳转到具有存储在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 商店的方式实现相同的功能。

商店.js：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from './ducks/authentication'
import snackbar from './ducks/snackbar'
import sidebar from './ducks/sidebar'
import global from './ducks/global'
import quickView from './ducks/quickView'
import profileView from './ducks/profileView'

const store = configureStore({
  reducer: {
    auth: authReducer,
    snackbar,
    sidebar,
    global,
    quickView,
    profileView,
  },
  middleware: [...getDefaultMiddleware()],
})

export default store

以下是使用@reduxjs/toolkit 中的 createAction 和 createReducer 实现所有 reducer 的方法。

小吃店.js：

import { createAction, createReducer } from '@reduxjs/toolkit'

export const handleSnackbar = createAction('snackbar/handleSnackbar')

export const openSnackBar = …

暂时我不能使用ES6/ES2015而且我坚持使用ES5来编写Redux减速器.由于reducer的state参数必须是不可变的,即使它未定义,我想出了以下模式:

function myState( state, action ) {
    if ( typeof state === 'undefined' ) {
        return myState( { value1: 'foo', value2: 'bar' }, action );
    }
    // actual state calculation here
}

有关如何使用ES5确保默认值的任何其他建议或意见？

编辑:经过一些问题和建议:我做递归调用的原因是我非常认真地对待"状态是不可变的".所以即使state参数是undefined,我也不会改变参数变量本身.我把不变性带到了太远了吗？

我在我的 React 应用程序中使用 redux-persist 。注销时，我想完全重置 redux 状态并删除所有本地存储数据。

这是我的注销操作，其中我从后端删除刷新令牌，然后在调度 RESET 之前对 redux 存储持久器调用 purge。

export const logout = () => (dispatch) => {
    if (localStorage.refreshToken) {
        axios.post(`${API_URL}/logout`, {token: localStorage.refreshToken}).then( async () => {
            // rest redux-persist
            await persistor.purge();
            dispatch({ type: RESET });
        });
    }
}

在我的根减速器中，我按照此处的答案来处理此重置操作：

const appReducer = combineReducers({
    /* app level reducers...*/
});

const rootReducer =  (state, action) => {
    console.log("Reducing action: ", action);
    if (action.type === RESET) {
        // reset state
        state = undefined;
        // reset …

我正在寻找如何使用 redux-persist 部分清除。我不知道它是否有相关的方法。这是我的代码，我知道这种方式将删除所有状态。如果您对此有任何想法，请回复，我将不胜感激。谢谢 ：）

const configure = () => {
    const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    let store = createStoreWithFirebase(reducer, devTools, applyMiddleware(ReduxThunk));
    let persistor = persistStore(store);

    persistor.purge();
    return {store, persistor};
}

我正在使用Ngrx和Angular2构建移动应用程序.当用户从我的应用程序注销时,我想清除存储吗？任何人都可以知道如何做到这一点？

我正在尝试在一个较早的线程中解决该问题，该问题通常是如何重置Redux存储状态的？-用户注销时需要重新初始化/使整个Redux存储无效。

但是，就我而言，仍然缺少一些东西。我将Redux与ConnectedRouter结合使用，并且尝试执行以下操作。

将rootReducer定义为：

export default history => 
  combineReducers({
    router: connectRouter(history),
    user,
    manager,
    vendor
    // rest of your reducers
  });

然后，我configureStore将上面的内容导入为createRootReducer：

const configureStore = (initialState = {}, history) => {
  let composeEnhancers = compose;
  const composeWithDevToolsExtension =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
  const enhancers = [];
  const middleware = [sagaMiddleware, thunk, routerMiddleware(history)];
  if (typeof composeWithDevToolsExtension === 'function') {
    composeEnhancers = composeWithDevToolsExtension;
  }
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    initialState,
    composeEnhancers(applyMiddleware(...middleware), ...enhancers)
  );
  store.runSaga = …

最近几天，我似乎在这件事上陷入困境。

我们正在开发Angular 2应用程序，我需要为用户创建一个向导以填写表单。

我已经成功地使数据流过了向导的每个步骤，并保存了它以便自由地来回移动。但是，提交表单后，我似乎无法重置它。

我应该补充一点，每个组件都在墙后。也许更好的解决方案是直接在AppModule上注入单例服务。但是我似乎无法使其正常工作。

到目前为止，这是我的代码：

步骤1

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { EventOption } from '../../../events/shared/event-option.model';
import { Store } from '@ngrx/store';
import { NewEventService } from '../shared/new-event.service';
import { Event } from '../../../events/shared/event.model';
import { FriendService } from '../../../friends/shared/friend.service';

@Component({
  selector: 'app-upload-images',
  templateUrl: './upload-images.component.html',
  styleUrls: ['../../../events/new-event/new-event.component.css']
})
export class UploadImagesComponent implements OnInit {
  form: FormGroup;
  private event;
  private images = []; …