Question

我在这里遇到这个问题，不知道发生了什么事...

“ TypeError：无法读取未定义的属性'type'”

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer from './modules/rootReducer';
import rootSaga from './modules/rootReducer';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
 rootReducer,
 applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

reducer.js reducer.js

import produce from 'immer';

export default function cart(state = [], action) {

switch (action) {

case 'ADD_SUCCESS':
  return produce(state, draftState => {
    const { product } = action;
    draftState.push(product)
  });

case 'REMOVE':
  return produce(state, draftState => {
    const productIndex = draftState.findIndex(product => product.id === action.id)

    if (productIndex >= 0) {
      draftState.splice(productIndex, 1);
    }
  });

case 'UPDATE_AMOUNT_SUCCESS':
  return produce(state, draftState => {
    const productIndex = draftState.findIndex(product => product.id === action.id)

    if (productIndex >= 0) {
      draftState[productIndex].amount = Number(action.amount);
    }
  });

default:
  return state;
  }

};

actions.js actions.js

export function addToCartRequest(id) {
   return {
type: 'ADD_REQUEST',
id
 };
};

export function addToCartSuccess(product) {
  return {
type: 'ADD_SUCCESS',
product
  };
};

export function removeFromCart(id) {
  return {
type: 'REMOVE',
id
  };
};

export function updateAmountRequest(id, amount) {
  return {
type: 'UPDATE_AMOUNT_REQUEST',
id,
amount
  };
};

export function updateAmountSuccess(id, amount) {
  return {
type: 'UPDATE_AMOUNT_SUCCESS',
id,
amount
  };
};

sagas.js-第1部分 sagas.js - part 1

import { call, select, put, all, takeLatest } from 'redux-saga/effects';
import { toast } from 'react-toastify';

import api from '../../../services/api';
import history from '../../../services/history';
import { addToCartSuccess, updateAmountSuccess } from './actions';
import { formatPrice } from '../../../utils/format';

function* addToCart({ id }) {

  const productExists = yield select(
    state => state.cart.find(p => p.id === id),
  );

  const stock = yield call(api.get, `/stock/${id}`);

  const stockAmount = stock.data.amount;

  const currentAmount = productExists ? productExists.amount : 0;

  const amount = currentAmount + 1;

  if (amount > stockAmount) {
    toast.error('Out of stock!')
    return;
  }

  if (productExists) {

    yield put(updateAmountSuccess(id, amount))

  } else {
    const response = yield call(api.get, `/products/${id}`);

    const data = {
      ...response.data,
      amount: 1,
      priceFormatted: formatPrice(response.data.price),
    }

sagas.js-第2部分 sagas.js - part 2

    yield put(addToCartSuccess(data));
    history.push('/cart');
  }

};

function* updateAmount({ id, amount }) {
  if (amount <= 0) return;

  const stock = yield call(api.get, `stock/${id}`);

  const stockAmount = stock.data.amount;

  if (amount > stockAmount) {
    toast.error('Out of stock!')
    return;
  }

  yield put(updateAmountSuccess(id, amount));
}

export default all([
  takeLatest('@cart/ADD_REQUEST', addToCart),
  takeLatest('@cart/UPDATE_AMOUNT_REQUEST', updateAmount)
]);

存储库链接：https://github.com/euguilhermegirardi/Knots-4-You

Answer 1

解决了问题！

我删除了文件“ rootSagas”，并将“ sagas.js”中的最后一个代码更改为：

老感冒：

export default all([
  takeLatest('@cart/ADD_REQUEST', addToCart),
  takeLatest('@cart/UPDATE_AMOUNT_REQUEST', updateAmount)
]);

新的：

export default function* watchAll() {
  yield all([
    takeLatest('ADD_REQUEST', addToCart),
    takeLatest('UPDATE_AMOUNT_REQUEST', updateAmount)
  ]);
}

ReactJS Redux-Saga-TypeError：无法读取未定义的属性“ type”

1 个答案: