Мой компонент не перерисовывается при обновлении магазина

Question

Я гуглил, но ничего не помогло.Я знаю, когда в редуксе я возвращаю тот же объект, реагирующий компонент не перерисовывается.Что бы я ни делал, не мутирую в магазине, я использую Connect из 'Reaction-Redux', и над другими компонентами работает правильно

Спасибо: D

//I'm updating a attribute value from this object: 
{name: 'some name', score: 0,}

//to 
{name: 'some name', score: 1,}

//just change the score 

//Component: 
class ListTeam extends Component {
  render() {
    return (
      <ListContainer onNewTeam={this.props.onNewTeam}>
        {this.props.listTeam.map((item) =>
          <Item
            name={item.name}
            score={item.score}
            key={item.toString()}
          />
        )}
      </ListContainer>
    )
  }
}

const mapToProps = (store, props) => {
  return {
    listTeam: store.listTeam
  }
}

export default connect(mapToProps)(ListTeam)

REDUCER:

    case 'ADD_POINT':{
    let newstate = Object.assign({},state); //new state from current state
    let current = newstate.currentPlayer   //get current player 
    let listTeam = newstate.listTeam;  //getListTeam
    listTeam[current].score++; //+1 to score 

    return { 
        ...state,
        listTeam
    }
}

Answer 1

Что вам не хватает, так это то, что в connect, предоставленном react-redux, он только поверхностно сравнивает текущее состояние с предыдущим состоянием.Поскольку вы только передаете currentPlayer и listTeam из хранилища в ваш компонент, а после действия ADD_POINT объект listTeam сохраняется со всеми его неизменными ключами, логика connect определила, что обновлять не нужно.Вот небольшой пример в потоке проблем gitub , который закрыт для вашей реализации.

Одним из простых решений является клонирование вашего listTeam в хранилище при каждом обновлении, чтобы его можно было распознать.как новый объект:

   case 'ADD_POINT':{
    let newstate = Object.assign({},state); //new state from current state
    let current = newstate.currentPlayer   //get current player 
    let listTeam = newstate.listTeam;  //getListTeam
    listTeam[current].score++; //+1 to score 

    return { 
        ...state,
        listTeam: JSON.parse(JSON.stringify(listTeam)
    }
}

Мой простой Codesandbox для вышеприведенного решения: https://codesandbox.io/s/xjp77jpyro

Вы также можете посмотреть Неизменный , как это рекомендовано Redux для обработки неизменяемого состояния.

Другое решение - настроить функцию connect, чтобы она распознавала изменения в list: https://react -redux.js.org / api / connect # options-object .Но я не думаю, что вам нужно заходить так далеко.