了解 Redux Action 上的 JSON.stringify()？

Question

我正在尝试重置数据，想回到初始状态，我知道不变性在这部分起着主要作用。

下面是我的店铺数据（Flow Completed数据）

  animalSense: {
    selectedVision: 'dayLight',
    selectedState: 'california',
    viewedVisions: ['dayLightcalifornia', 'dayLightsouthAfrica', 'nightVisioncalifornia'],
    viewedAnimals: ['dog', 'cat']
  },

我想用下面的数据替换它

  animalSense: {
    selectedVision: '',
    selectedState: '',
    viewedVisions: [''],
    viewedAnimals: []
  },

我知道下面的操作是添加初始数据的直接且正确的方法是

export const RESET_ANIMAL_SENSES = 'actions/reset_animal_senses';

export default () => ({
  type: RESET_ANIMAL_SENSES,
  payload: {
    selectedVision: '',
    selectedState: '',
    selectedAnimal: '',
    viewedVisions: [''],
    viewedAnimals: []
  }
});

但上面的动作保持相同的状态e

Below action is Working Solution but I don't know is this a Proper way

export const RESET_ANIMAL_SENSES = 'actions/reset_animal_senses';

const data = JSON.stringify({
  selectedVision: '',
  selectedState: '',
  selectedAnimal: '',
  viewedVisions: [''],
  viewedAnimals: []
});
export default () => ({
  type: RESET_ANIMAL_SENSES,
  payload: JSON.parse(data)
});

当我们使用 stringify 时，连接已结束并添加了新状态，但我不知道为什么没有 JSON.stringify() 就无法正常工作？

减速器

import { SELECT_VISION } from '../actions/select_vision_type';
import { CHANGE_ANIMAL_VIDEO_STATE } from '../actions/change_animal_video_state';
import { UPDATE_ANIMALS } from '../actions/update_animals';
import { RESET_ANIMAL_SENSES } from '../actions/reset_animal_senses';

export default (state = {}, action) => {
  let newState = state;
  switch (action.type) {
    case SELECT_VISION:
      newState = { ...state, ...action.payload };
      break;
    case CHANGE_ANIMAL_VIDEO_STATE:
      newState = { ...state, ...action.payload };
      break;
    case UPDATE_ANIMALS:
      newState = { ...state, ...action.payload };
      break;
    case RESET_ANIMAL_SENSES:
      newState = { ...state, ...action.payload };
      break;
    default:
      break;
  }
  return newState;
};

Answer 1

试试看，我会对您的减速器进行大量重构。

import { SELECT_VISION } from '../actions/select_vision_type';
import { CHANGE_ANIMAL_VIDEO_STATE } from '../actions/change_animal_video_state';
import { UPDATE_ANIMALS } from '../actions/update_animals';
import { RESET_ANIMAL_SENSES } from '../actions/reset_animal_senses';


const initialState = {
  selectedVision: '',
  selectedState: '',
  selectedAnimal: '',
  viewedVisions: [''],
  viewedAnimals: []
}

export default (state = initialState, action) => {
  switch (action.type) {
    // since all the cases have common code.
    case SELECT_VISION:
    case CHANGE_ANIMAL_VIDEO_STATE:
    case UPDATE_ANIMALS: {
        return { ...state, ...action.payload }
    }
    case RESET_ANIMAL_SENSES: {
        return { ...initialState }
    }
    default: {
        return state;
    }
  }
};

试试这个减速器一次。但是，目前我不清楚为什么它会与 stringify 一起使用。

Answer 2

有效载荷中的传播运算符解决了这个问题

export const RESET_ANIMAL_SENSES = 'actions/reset_animal_senses';
const data = {
    selectedVision: '',
    selectedState: '',
    selectedAnimal: '',
    viewedVisions: [''],
    viewedAnimals: []
};
export default () => ({
  type: RESET_ANIMAL_SENSES,
  payload: { ...data } // here is the solution
});

了解 Redux Action 上的 JSON.stringify()？

Understanding JSON.stringify() on Redux Action?

immutability

redux

react-redux