Состояние изменяется путем отправки действия, но mapStateToProps не вызывается - PullRequest
Новая
       10

Состояние изменяется путем отправки действия, но mapStateToProps не вызывается

0 голосов
/ 29 марта 2019

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

Когда я отправляю действие, вызывается редуктор и состояние изменяется (проверяю с помощью (состояние nextState ===), однако mapStateToPropsникогда не вызывается.

Для информации, диспетчерское действие и mapStateToProps происходят из одного компонента. Этот компонент находится в StackNavigator. Даже если я использую только компонент, проблема остается той же.

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

диспетчер: 

 _toggleFavorite() {
    const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
    this.props.dispatch(action)
  }

Редуктор: 

const initialState = { favoritesFilm: [] }
function toggleFavorite(state = initialState, action) {
  let nextState
  switch (action.type) {
    case 'TOGGLE_FAVORITE':
      const favoriteFilmIndex = state.favoritesFilm.findIndex(item => item.id === action.value.id)
      if (favoriteFilmIndex !== -1) {
        nextState = {
          ...state,
          favoritesFilm: state.favoritesFilm.filter( (item, index) => index !== favoriteFilmIndex)
        }
      }
      else {
        nextState = {
          ...state,
          favoritesFilm: [...state.favoritesFilm, action.value]
        }
      }
      console.log('state: ', state)
      console.log('nextState: ', nextState)
      console.log(nextState === state)
      return nextState
  default:
    return state
  }
}
export default toggleFavorite

Подключение к магазину: 

const mapStateToProps = (state) => {
  console.log('changed')
  return {
    favoritesFilm: state.favoritesFilm
  }
}

export default connect(mapStateToProps)(FilmDetail)

Навигатор: 

const SearchStackNavigator = createStackNavigator({
      SearchBar: { 
        screen: SearchBar,
        navigationOptions: {
          title: 'Rechercher'
        }
      },
      FilmDetail: {
        screen: FilmDetail
      }
    })
export default createAppContainer(SearchStackNavigator)

App.js: 

import Navigation from './src/Navigation/Navigation';
import store from './src/Store/configureStore'
import { Provider } from 'react-redux'

export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <Navigation/>
      </Provider>
    );
  }
}

Журнал от редукторов работает. Вот пример: 

state:  – {favoritesFilm: []} 
nextstate:  – {favoritesFilm: Array} 
false

Журнал («измененный») никогда не появляется, ни componentDidUpdate (). Кроме того, ничегоперерисован.

СпасибоВы заранее.

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Решение найдено ....... После нескольких дней осмотра ..... Проблема версий: Реактив-родной 0.57.4 и реактив-редукс 6.0.1 Я изменил реактив-редукс на 5.1.0.

0 голосов
/ 29 марта 2019

Как я понимаю, вы не видели console.log('changed') в mapStateToProps после действия отправки.На самом деле mapStateToProps просто запускается один раз, после изменения диспетчеризации на редуктор он отправляет новые реквизиты компоненту, чтобы вы могли отследить

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps вызывается прямо перед вызовом метода рендеринга,как на начальном монтировании, так и на последующих обновлениях.Он должен возвращать объект для обновления состояния или null для обновления ничего.

пример: 

static getDerivedStateFromProps(props, state) {
  console.log('change', props);
}

Для отслеживания изменений Redux при разработке я рекомендую использовать Redux devtool https://github.com/zalmoxisus/redux-devtools-extensionЭтот инструмент сэкономит вам много времени.

...