Отправленное действие не влияет на состояние магазина с избыточностью - PullRequest
Новая
       8

Отправленное действие не влияет на состояние магазина с избыточностью

0 голосов
/ 13 июня 2018

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

Это то, что у меня есть в app.js: 

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import configureStore from './store/configureStore';
import { addExpense } from './actions/expenses';
import { setTextFilter } from './actions/filters';
import getVisibleExpenses from './selectors/expenses';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const store = configureStore();
store.dispatch(addExpense({ description: 'Water bill' }));
console.log(store.getState());
ReactDOM.render(<AppRouter />, document.getElementById('app'));

Это мой /actions/expenses файл: 

import uuid from 'uuid';
// ADD EXPENSE
export const addExpense = ({
  description = '',
  note = '',
  amount = 0,
  createdAt = 0
} = {}) => ({
  type: 'ADD EXPENSE',
  expense: {
    id: uuid(),
    description,
    note,
    amount,
    createdAt
  }
});
// REMOVE EXPENSE
export const removeExpense = ({ id } = {}) => ({
  type: 'REMOVE_EXPENSE',
  id
});
// EDIT EXPENSE
export const editExpense = (id, updates) => ({
  type: 'EDIT_EXPENSE',
  id,
  updates
});

Этомой actions/filters файл: 

// SET TEXT FILTER
export const setTextFilter = (text = '') => ({
  type: 'SET_TEXT_FILTER',
  text
});
// SORT BY DATE
export const sortByDate = () => ({
  type: 'SORT_BY_DATE'
});
// SORT BY AMOUNT
export const sortByAmount = () => ({
  type: 'SORT_BY_AMOUNT'
});
// SET START DATE
export const setStartDate = (startDate) => ({
  type: 'SET_START_DATE',
  startDate
});
// SET END DATE
export const setEndDate = (endDate) => ({
  type: 'SET_END_DATE',
  endDate
});

Это мой selectors/expenses файл: 

export default (expenses, { text, sortBy, startDate, endDate }) => {
  return expenses
    .filter((expense) => {
      const startDateMatch =
        typeof startDate !== 'number' || expense.createdAt >= startDate;
      const endDateMatch =
        typeof endDate !== 'number' || expense.createdAt >= endDate;
      const textMatch = expense.description
        .toLowerCase()
        .includes(text.toLowerCase());
      return startDateMatch && endDateMatch && textMatch;
    })
    .sort((a, b) => {
      if (sortBy === 'date') {
        return a.createdAt < b.createdAt ? 1 : -1;
      } else if (sortBy === 'amount') {
        return a.amount < b.amount ? 1 : -1;
      }
    });
};

Я не получаю никаких ошибок в командной строке, но продолжаю получать в консоли: 

{expenses: Array(0), filters {...}
expenses []

Это мой файл reducer / cost.js: 

const expensesReducerDefaultState = [];

export default (state = expensesReducerDefaultState, action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return [...state, action.expense];
    case 'REMOVE_EXPENSE':
      return state.filter(({ id }) => id !== action.id);
    case 'EDIT_EXPENSE':
      return state.map((expense) => {
        if (expense.id === action.id) {
          return {
            ...expense,
            ...action.updates
          };
        } else {
          return expense;
        }
      });
    default:
      return state;
  }
};

, а это мой файл redurs / filters.js: 

const filtersReducerDefaultState = {
  text: '',
  sortBy: 'date',
  startDate: undefined,
  endDate: undefined
};

export default (state = filtersReducerDefaultState, action) => {
  switch (action.type) {
    case 'SET_TEXT_FILTER':
      return {
        ...state,
        text: action.text
      };
    case 'SORT_BY_AMOUNT':
      return {
        ...state,
        sortBy: 'amount'
      };
    case 'SORT_BY_DATE':
      return {
        ...state,
        sortBy: 'date'
      };
    case 'SET_START_DATE':
      return {
        ...state,
        startDate: action.startDate
      };
    case 'SET_END_DATE':
      return {
        ...state,
        endDate: action.endDate
      };
    default:
      return state;
  }
};

1 Ответ

0 голосов
/ 13 июня 2018

Согласно документации (https://redux.js.org/api-reference/store#dispatch-action), store.dispatch является синхронным, как и ваша addExpense функция.

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

Обе эти ситуации вряд ли приведут к возникновению исключения (опять же, в зависимости от кода вашего редуктора).

РЕДАКТИРОВАТЬ

В вашемВ /actions/expenses файле вы устанавливаете тип действия на ADD EXPENSE, но в редукторе ваш switch ищет ADD_EXPENSE! Поэтому добавьте подчеркивание в файл /actions/expenses или удалите его из редуктора.

Не было бы ошибки консоли, потому что ваш код рассматривает ее как случай по умолчанию.

В будущем я бы рекомендовал консоль протоколировать action.type в случае по умолчанию от switch до mУбедитесь, что вы не пропустили никаких действий.Кроме того, вы должны использовать перечисление для типов действий, а не просто для строки, чтобы сделать эту ошибку намного сложнее.См. Пример ниже:

Редуктор: 

import actionType from "../actionsEnum";

const expensesReducerDefaultState = [];

export default (state = expensesReducerDefaultState, action) => {
  switch (action.type) {
    case actionType.ADD_EXPENSE:
      return [...state, action.expense];
    // ...
    default:
      return state;
  }
};

Файл Enum: 

const actionType = {
    ADD_EXPENSE: "ADD_EXPENSE"
};

// Prevent new actions from being added or deleted outside this file
export default Object.freeze(actionType);
...