Неизменное состояние не освежает - PullRequest
Новая
       2

Неизменное состояние не освежает

0 голосов
/ 19 февраля 2019

Я создаю приложение реагирования, у меня есть коллекция "категорий" и слой презентации с кнопкой для удаления категории.Обновление моего состояния редукса, если я перезагружаю страницу, в противном случае является постоянным.Я не понимаю, почему он не работает, так как мне кажется неизменным, плюс я использую тот же шаблон в другом компоненте и работает нормально.Чего мне не хватает?

Вот редуктор: 

import {DELETE_CATEGORY} from './../../actionType';
const initialState = {
  singleCategory: {},
  categories: []
}

export default function(state = initialState, action){
  switch(action.type){
    case DELETE_CATEGORY:
    return {
      ...state,
      categories: state.categories.filter (category=>category._id !== category.payload)
    }

    default:
      return state;
  }
}

Кстати, если я обновлю страницу, магазин фильтруется правильно.Вот мое действие: 

// Delete Category by id
export const deleteCategory = (categoryId) => dispatch => {
  console.log('disp');
  axios
    .delete(`/api/categories/${categoryId}`)
    .then( success => {
      dispatch(successMessage);
      return dispatch({
        type: DELETE_CATEGORY,
        payload: categoryId
      })
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      }),
    );
};

Вот мой компонент: 

class ShowCategoriesPage extends Component {

  componentDidMount(){
    this.props.getCategories()
  }
  handleDeleteCategory = (categoryId) => {
    this.props.deleteCategory(categoryId);
  }
  render() {
    const { categories } = this.props.categories;
    return (
      <SidebarLayout>
        {categories.map(category => (
          <CategoryCard
            name={category.name}
            type={category.type}
            id={category._id}
            handleDeleteCategory={this.handleDeleteCategory}
          />
        ))}
        <Button variant="contained" color="primary" style={{marginTop: '36px'}} >
        ADD NEW CATEGORY
      </Button>
      </SidebarLayout>
    )
  }
}

, и это компонент: 

const SimpleCard = ({ classes, name, type, id, deleteCategory })=>{

  const onDeleteCategory = (categoryId) => {
    deleteCategory(categoryId);
  }

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h5" component="h2">
          {name}
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          {type}
        </Typography>
        <Button variant="small" color="primary" style={{marginTop: '36px'}} onClick={()=>onDeleteCategory(id)}>
        REMOVE
      </Button>
        <Button variant="small" color="primary" style={{marginTop: '36px'}} >
        EDIT
      </Button>
      </CardContent>
    </Card>
  );
}

Я прочитал официальную документацию исоветует использовать сплайс или фильтр, как я, можете ли вы понять, почему состояние при редуксе не обновляется при нажатии на кнопку удаления?

Я хочу избежать принудительного обновления состояния.

1 Ответ

0 голосов
/ 19 февраля 2019

Вы уверены, что эта строка правильная 

      categories: state.categories.filter (category=>category._id !== category.payload)

, а не 

      categories: state.categories.filter (category=>category._id !== action.payload)
...