Это состояние ..... фильтр не вариант?Реактивные редукторы - PullRequest
Новая
       1

Это состояние ..... фильтр не вариант?Реактивные редукторы

0 голосов
/ 19 сентября 2019

У меня есть это: 

const initialState = {
  pages: [],
  page: null,
  loading: true,
  error: {}
};

Тогда у меня есть это: 

import {
  GET_PAGES,
  PAGE_ERROR,
  DELETE_PAGE,
  ADD_PAGE,
} from '../actions/types';

const initialState = {
  pages: [],
  page: null,
  loading: true,
  error: {}
};

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_PAGES:
      return {
        ...state,
        page: null,
        pages: payload,
        loading: false
      };
    case ADD_PAGE:
      return {
        ...state,
        pages: [payload, ...state.pages],
        loading: false
      };
    case DELETE_PAGE:
      return {
        ...state,
        pages: state.pages.filter(page => page._id !== payload),
        loading: false
      };
    case PAGE_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    default:
      return state;
  }
}

Каждый раз, когда я удаляю запись из моей базы данных, отображается сообщение об этом «state.pages».Фильтр не является функцией ».Я боролся с этим уже довольно давно.Любая помощь будет по достоинству оценена!Вот что я имею в своем компоненте: 

const Pages = ({ getPosts, page: { pages, loading }, deletePost }) => {

  useEffect(() => {
    getPosts();
  }, [getPosts]);

  return (
    <Fragment>
      {loading ? (
        <Spinner />
      ) : (
          <section className="mb-3">
            <div className="container-fluid">
              <h1 className="border-bottom-dark pb-3 mb-3">Pages</h1>
              {pages && pages.pageOfItems ? (
                <div className="row">
                  <div className="col-lg-12">
                    <div className="table-responsive">
                      <table className="table table-bordered" id="dataTable" width="100%" cellSpacing="0">
                        <thead>
                          <tr>
                            <th></th>
                            <th>Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {pages.pageOfItems.map(post => (
                            <tr key={post._id}>
                              <td></td>
                              <td className="btn-group">
                                <Link to={`/admin/pages/view/${post._id}`} className="btn btn-sm btn-dark"><i className="far fa-eye" /></Link>
                                <Link to={`/admin/pages/update/${post._id}`} className="btn btn-sm btn-warning"><i className="fas fa-edit" /></Link>
                                <button onClick={() => deletePost(post._id)} type="button" className="btn btn-danger btn-sm"><i className="fas fa-trash-alt" /></button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              ) : (
                  <div className="nothingfound">
                    <div className="alert alert-danger">No pages found</div>
                  </div>
                )}
            </div>
          </section>
        )}
    </Fragment>
  )
};

Pages.propTypes = {
  getPosts: propTypes.func.isRequired,
  deletePost: propTypes.func.isRequired,
  page: propTypes.object.isRequired,
};

const mapStateToProps = state => ({
  page: state.page,
});

export default connect(
  mapStateToProps,
  { getPosts, deletePost }
)(Pages);

1 Ответ

0 голосов
/ 20 сентября 2019

Как и предлагали другие, вам нужно console.log вашего state.posts: 

case DELETE_PAGE:
  console.log(state.pages); // here
  return {
    ...state,
    pages: state.pages.filter(page => page._id !== payload),
    loading: false
  };

Возможно, ваше действие GET_PAGES возвращает не массив в качестве полезной нагрузки: 

case GET_PAGES:
  return {
    ...state,
    page: null,
    pages: payload, // Is the payload an array?
    loading: false
  };

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

...