Как обновлять массив в реальном времени не после refre sh страницы (Redux) - PullRequest
Новая
       31

Как обновлять массив в реальном времени не после refre sh страницы (Redux)

0 голосов
/ 08 апреля 2020

Я делаю список дел и хочу сделать функционал, когда вы нажмете кнопку «Готово», текст будет зачеркнут. Я сделал массив с предложениями, которые имеют поля «текст» и «isDone». По умолчанию isDone имеет значение false, когда при нажатии я получаю весь массив со сделками и текстовыми сделками, по которым вы нажимаете. Затем я сопоставляю массив с полученными сделками и сравниваю текст из сделки с кликом и текст во всех сделках в массиве. Если они совпадают, я меняю isDone с false на true. Но он обновляется, если я обновляю sh страницу, и мне нужно, чтобы она обновлялась при нажатии. Я использую redux-persist, и все состояния помещаются в localStorage

Кнопка 

<button onClick={()=>this.props.done(this.props.deals,value.text)}>Done</button>

Действие 

export function done(newDeals,dealText){
    return(dispatch) =>{
        newDeals.map(value=>{
            if(value.text === dealText){
                value.isDone = !value.isDone
            }
        })
        dispatch(doneDeal(newDeals));
    }
}

export function doneDeal(newDeals){
    return{
        type: DONE,
        newDeals
    }
}

Редуктор 

export default function toDoList(state = initialState, action){
    switch(action.type){
        case DONE:
            return { 
                ...state, deals: action.newDeals
            }
        default:
            return state
    }
}

Я удаляю код которые не имеют смысла для этого примера, но нуждаются в дополнительной информации, пожалуйста, спросите, я скажу Спасибо!

1 Ответ

0 голосов
/ 08 апреля 2020

Вы должны использовать mapStateToProps, чтобы получить недавно обновленное состояние из состояния Redux.

Все, что вам нужно, - это обернуть экспорт компонента следующим: 

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

export default connect(mapStateToProps)(ComponentName);

. получают необходимые данные о состоянии из initialState, который вы определили в своем редукторе, и ссылка на эти данные - это «сделки», которые можно использовать как обычную опору: this.props.deals в случае компонента класса ИЛИ в качестве параметра при дескруктурировании ({deals}) в случае с функциональным компонентом.

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

Кому Чтобы сделать вещи более понятными для вас, вы можете прочитать больше по этой ссылке: https://react-redux.js.org/using-react-redux/connect-mapstate

ОБНОВЛЕНИЕ: Я выяснил вашу проблему после добавления вашего ответа. Проблема с вашим кодом здесь: <button onClick={()=>this.props.done(this.props.deals,value.text)}>Done</button>

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

state = {
    deals: this.props.deals
}

и изменить onClick на следующее: 

<button onClick={()=>this.props.done(this.state.deals,value.text)}>Done</button>
...