return {
...state,
название_поля:{
title:action.title
}
}return {
...state,
[action.title]:{
title:action.title
}
}return {
...state,
dollar:{
title: "dollar" // предположим что в action.title строка "dollar"
}
}{
type: 'BLA_BLA'
}function qq() {
return {
type: 'BLA_BLA',
}
}dispatch(qq())
// или
dispatch({
type: 'BLA_BLA',
})export default (state = initialState, action) => {
switch (action.type)
{
case 'BLA_BLA':
// вот сюда придет javascript компилятор, так как вы попали в нужный кейс
// ибо выше указано - switch по типу экшена (action.type)
// ниже вы делаете что вам нужно с вашими данными
// конкретно в этом кейсе, вы берете все что было в state и изменяете loading на true
return { ...state, loading: true };
case CALLBACK_SUCCESS:
// сюда action с типом 'BLA_BLA' не попал
return { ...state, status: 'OK' };
case CALLBACK_ERROR:
// сюда тоже
return { ...state, status: 'ERROR', message: action.message };
default:
// и сюда
return state;
}
}Например скажут поправить элемент на корпоративном сайте - ок, без проблем, но вряд ли нужно каждый день что-то подправлять, добавлять или удалять?
onDeleteClick (который является методом вашего класса)state = {
users: [/*.. массив с юзерами*/]
}
...
onDeleteClick = (e) => {
const id = e.currentTarget.dataset.myId
const новый_массив = массив_без_удаленного_элемента (подсказка, удалять можно через фильтрацию по айди)
this.setState({ users: новый_массив })
}
...
let user = this.props.users.map(function(user){
return <li key={user.id}><User number={user.id} id={user.id} text={user.id} onDeleteClick={this.onDeleteClick}/></li>
})
...
// где-то там в компоненте User (что там внутри не знаю, но предположим есть кнопка удаления как вы пишите)
...
render() {
<div>
// что-то по верстке про юзера
<button onClick={this.props.onDeleteClick} data-my-index={this.props.user.id}> Удалить</button>
</div>
}<img src="//images/my_image.jpg">
const mapStateToProps = state => ({ // state = все ваши редьюсеры, то есть тут лучше было бы писать store, но так уж поевелось..
campaigns: state.campaigns, // компонент подписывается только на state.campaigns (то есть только на редьюсер campaigns)
});
connect(mapStateToProps/*, mapDispatchToProps*/)(CampaignsList) // происходит коннект, mapDispatshToProps - это для "прокидывания" создателей действий (action creator)// Parent component
...
state = {
data: [],
}
...
myMethodInParent = (values) => {
this.setState({data: values })
}
...
render() {
...
<AnyChildren testName={this.myMethodInParent} />
}
// AnyChildren component
...
handleSubmit() => {
this.props.testName( _ваши_данные_которые_нужно_в_стейт_родителя_ )
}
...
render() {
...
}// ваш компонент
// 1) устанавливаем начальный state
state = {
data: []
}
// 2) делаем ajax (xhr) запрос, например в comonentDidMount (в момент, когда компонент примонтирован)
componentDidMount() {
// $.ajax( ...
// или xhr, или fetch
// покажу fetch
const self = this
fetch(`${API_ROOT}/${endPoint}`)
.then(ОТВЕТ => {
// УСТАНАВЛИВАЕМ в STATE
self.setState({ data: ОТВЕТ })
}
})
// реальный код фетча - https://github.com/maxfarseer/forge/blob/2-books-router/src/helpers/network.js
}
// 3) в компоненте рисуем
render() { return <div>ваши_данные</div>