Store.Dispatch() 重置 Redux 商店

Question

我 dispatch(action()) 从我的 React 组件外部触发 action。它工作正常，因为它触发了我的操作并更新了我的 store 中的新项目。问题是它似乎完全重置了我 store 中的所有其他内容，这对我来说至少使它成为一个问题而不是它的价值。

值得注意：我正在使用 next.js。

这是我的流程的基本思路：

我有一个包含服务的 utils 文件夹，我从中发送此操作：

import store from './store';
store.dispatch(myAction());

我有我的行动

export const myAction = () => ({
  type: HELP_ME,
  payload: true,
});

const initialState = {
  reducerVar: fase,
  otherExistingVar: {},
  otherExistingVarTwo: null,
  otherExistingThree:null,
  otherExistingVarFour: false,
};

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case HELP_ME: {
      const reducerVar = action.payload;
    } 
    default: {
      return state;
    }
  }
};
export default myReducer;

我不确定我是否在滥用 store.dispatch()，因为我不明白为什么有人会使用这种技术，如果它完全清除了商店中的现有数据。或者是否有更好的方法从我的组件外部触发这个简单的操作。

基本上我想dispatch这个动作而不完全清除我的商店就像我在组件中调度动作一样。

谢谢！

Answer 1

你正在尝试做的很好。但是你的 reducer 必须 return 整个状态，你的改变是通过下面的动作完成的。

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case HELP_ME:
      const reducerVar = action.payload;
      return {...state, reducerVar }
    default:
      return state;
  }
};

Answer 2

你应该return像这样在reducer中有值的状态。

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case HELP_ME: {
      return {...state, reducerVar : action.payload}
    } 
    default: {
      return state;
    }
  }
};

Store.Dispatch() 重置 Redux 商店

Store.Dispatch() Resetting Redux Store

javascript

reactjs

redux

redux-thunk

react-redux