Магазин.Отправка() Сброс хранилища Redux

#javascript #reactjs #redux #react-redux #redux-thunk

Вопрос:

Я dispatch(action()) должен вызвать action извне мой компонент реакции. Он работает правильно в том смысле, что запускает мое действие и обновляет новый элемент в моем store . Проблема в том , что он, похоже, полностью сбрасывает все остальное в моем store , что, по крайней мере, для меня делает его большей проблемой, чем его ценность.

Стоит отметить: я использую next.js .

Вот основная идея моего потока:

У меня есть папка utils со службой, из которой я отправляю это действие:

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

У меня есть свои действия

 export const myAction = () =gt; ({  type: HELP_ME,  payload: true, });   
 const initialState = {  reducerVar: fase,  otherExistingVar: {},  otherExistingVarTwo: null,  otherExistingThree:null,  otherExistingVarFour: false, };  const myReducer = (state = initialState, action) =gt; {  switch (action.type) {  case HELP_ME: {  const reducerVar = action.payload;  }   default: {  return state;  }  } }; export default myReducer;  

Я не уверен, что злоупотребляю store.dispatch() , потому что не понимаю, зачем кому-то использовать эту технику, если она полностью уничтожает существующие данные в хранилище. Или есть лучший способ запустить это простое действие извне моего компонента.

В принципе, я хочу выполнить dispatch это действие, не полностью уничтожая свой магазин, точно так же, как я отправил бы действие, если бы я был в компоненте.

Спасибо!

Комментарии:

1. Как выглядит ваш редуктор? Как выглядит магазин?

Ответ №1:

вы должны вернуть состояние со значением в редукторе, как это.

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

Ответ №2:

То, что вы пытаетесь сделать, прекрасно. Но ваш редуктор должен вернуть все состояние с вашим изменением, выполненным действием, как показано ниже.

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