Как обновить компонент при изменении состояния в Redux - PullRequest
Новая
       46

Как обновить компонент при изменении состояния в Redux

0 голосов
/ 13 октября 2019

Я пытаюсь обновить компонент при изменении состояния в Redux. У меня есть список изображений, когда пользователь удаляет изображение, которое компонент должен обновить после удаления целевого изображения.

Я попытался использовать метод жизненного цикла componentWillReceiveProps и componentDidUpdate, но ни один из них здесь не работает. Может кто-нибудь подсказать, пожалуйста, что я делаю здесь не так?

что я сделал до сих пор

действие 

import { DELETE_GALLERY_SUCCESS, DELETE_GALLERY_FAIL} from "./types";

export const deleteGalleryImage = (id) => (dispatch, getState) => {
    axios    
        .delete(`${baseURL}/api/aws/gallery/${id}/delete/`, tokenConfig(getState))

        .then(res => {
            dispatch({
                type: DELETE_GALLERY_SUCCESS,
                payload: res.data
            });


        })
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status));
            dispatch({
                type: DELETE_GALLERY_FAIL
            });
        });
};

типы.js 

export const DELETE_GALLERY_SUCCESS = "DELETE_GALLERY_SUCCESS"
export const DELETE_GALLERY_FAIL = "DELETE_GALLERY_FAIL"

Редуктор 

import {DELETE_GALLERY_SUCCESS, DELETE_GALLERY_FAIL} from "../actions/types";

const initialState = {
    paginations: true,
    isLoading: false,
    gallery: [],

};


export default function (state = initialState, action) {
    switch (action.type) {
        case DELETE_GALLERY_SUCCESS:
           return {
                ...state,
                isLoading: false,
                gallery: state.gallery.filter(gallery => gallery.id !== action.payload)
            };

        case DELETE_GALLERY_FAIL:
            return {
                ...state,
                isLoading: false
            };

        default:
            return state;
    }
}

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

import { getAllGalleryImages, deleteGalleryImage } from '../settings/../../actions/gallery';


class DeleteGalleryImage extends Component {

    componentDidMount() {
        this.props.getAllGalleryImages();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.images !== nextProps.images) {

            // This is not working.
            // what life cycle method should I use for this scenario?

            //this.props.getAllGalleryImages()

        }
    }
    handleDelete = (id) => {
        this.props.deleteGalleryImage(id)
    }    
    render() {
        return (

            <Row>
                <Col xs={24} sm={22} offset={1}>
                    <h1 className='sub-page-heading'><span className='common_dlt'>Delete</span> Gallery Image</h1>
                    <div className='masonry'>

                        {this.props.images && this.props.images.results && this.props.images.results.map(result =>


                            <div className='masonry-item' key={result.id}>
                                <img src={result.gallery_img_url} className='dlt_blg_img' alt='img' id={result.id} />
                                <span className='gallery_delete_zone' onClick={() => this.handleDelete(result.id)}><Icon type="delete" /></span>
                            </div>

                        )}

                    </div>
                </Col>
            </Row>
        )
    }
}   
const mapStateToProps = state => ({
    images: state.gallery

});
export default connect(
    mapStateToProps,
    { getAllGalleryImages, deleteGalleryImage }
)(DeleteGalleryImage);

Store 

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

rootReducer 

import { combineReducers } from "redux";
import gallery from './gallery';

    export default combineReducers({
      gallery,

    });

1 Ответ

2 голосов
/ 13 октября 2019

В этом случае нет необходимости использовать componentWillReceiveProps. Если вы можете изменить хранилище успешно, компонент будет отображаться автоматически, поскольку он подключен к хранилищу.

Еще одна вещь, которую я заметил, в вашем действии deleteGalleryImage, я думаю, вам нужно отправить входной параметр id в качестве полезной нагрузки, потому что мы не можем предположить, будет ли res.data идентификатором. 

dispatch({
    type: DELETE_GALLERY_SUCCESS,
    payload: id
})

Редактировать : основываясь на информации, полученной из комментариев, я понял ваше начальное состояние 

const initialState = {
        count: 2,
        gallery: {},
        isLoading: true,
        next: null,
        paginations: true,
        previous: null,
        results: [{}, {}]

};

Так что ваш случай DELETE_GALLERY_SUCCCESS должен быть таким, если вы хотите удалить изображение в массиве результатов. 

   case DELETE_GALLERY_SUCCESS:
           return {
                ...state,
                  isLoading: false,
                  results: state.results.filter(image => image.id !== action.payload)
                }
            };
...